In this walkthrough, we’ll explore how to change any object on your Hatch page, triggered by a click. By adding interactions to a page element, we can assign all kinds of behaviors to it. Click to change a color or size, make an object appear or disappear. The best part? You can set up a page click to change any object through visual scripting, no coding knowledge required! This fun capability is sure to bring a new layer of creativity to your Hatch pages. See our video tutorials on visual scripting here and here or our walkthrough project here.
How to set up a click to change interaction
First, select the element you want visitors to interact with. This will be the thing a user clicks on to make a change. Then look at the top of the right sidebar for the interactions tab.
You’ll see three little icons. The first one with brackets lets you manually insert interactions with Javascript. The second with stars will bring up a handy AI helper that can really speed up the coding process with proper input.
For now though we’ll focus on the third option, the + sign. This will let you define your own interactions through visual scripting. After clicking the blue plus sign, we’ll pick create an interaction. We’ll end up in this menu:
Using custom interactions to create a click trigger
A trigger is what needs to happen for the interaction to occur. At the top you can see the common triggers, which are widely used to make simple, practical effects.
Let’s start with something easy. Let’s make a circle disappear when clicked. First, create a circle shape by clicking on basic elements on the left sidebar, then scrolling down the list. Once we have our circle ready, select it and try to add an interaction to it. Choose the “when clicked” trigger.
Take a look at the left side of this window. Starting from the top, we have the trigger condition we set before, when the circle is clicked.
Now we can start adding blocks under the trigger, each one with a specific command. These commands will be executed in descending order once the trigger condition is met, starting from the top. We add these blocks through the options on the right side of the window.
For our first command, let’s choose change object properties.
In the object box to the right, we’ll pick the element we want to modify with the command. This can be any object on the page; it doesn’t have to be the one you have selected right now.
Clicking choose a property under that will bring up a wide selection of object properties. Since we want to make the circle disappear, let’s pick opacity.
A new box will show up to the right that will let you edit the respective value. By dropping opacity to 0 we can make the object invisible.
Now click preview at the top and try clicking on your circle. Poof! It’s gone.
Add more interactions to a click
Let’s try adding another block. We’ll make something appear after the circle vanishes. We picked a little animated sticker from the left sidebar and set its initial opacity to 0 in the properties.
We placed it under the circle on the object tree, so that a click on the circle will still trigger our interaction. As a general rule, try to keep the object with the trigger interaction above other objects to ensure the click will be registered. You can access the object tree by clicking on the button at the bottom of the left sidebar.
Now let’s select the circle again and enter into the interaction menu. You can add another block by clicking the option below.
This time we’ll pick our new sticker as the object, and we’ll increase its opacity to 100.
Let’s see how the full interaction unfolds by clicking preview again. We’ve successfully set up a click to change the circle properties.
Advanced techniques to change object behavior
So far we added interactions directly to our circle. But what would happen if we wanted to display something on top of our circle? If you placed an object on top of the circle, then user clicks will be registered on the top-most object, not the circle. This means the interaction would never trigger!
To have lots of flexibility, we can create a separate trigger object. This is a transparent shape that’s only on the canvas to ensure the interaction registers clicks, without anything else getting in the way.
Just as we picked our circle before, we can select any shape we want to act as our trigger. We’ll then permanently set its opacity to 0, since we’re just using it to capture clicks. Remember to place this transparent trigger object above the rest of the elements in the object tree to ensure user clicks will register on it, no matter how the objects below are layered or modified.
Above is an example of a custom interaction we set up using both change property blocks and wait blocks. It’s a lot of fun to set up these custom interactions and see them work in real time on your page. Get your site visitors clicking all over your page to reveal fun things you’ve hidden!