To help you make custom interactions in Hatch, we are walking through our Interactions 101 project, built specifically for non-coders. The interactions are implemented through JavaScript but don’t worry! You don’t need any coding knowledge to use these. We’ll just copy their functionality and use them to build our own interactive Hatch page.
Open up the 101 project in another window and we’ll guild you through it, step by step.
Understanding element references
First, let’s bring up one of these interactions to understand how they work. Select the box that releases balloons on click, as shown below.
Access the interactions menu by clicking on the little lightning bolt at the bottom of the right sidebar. Under “javascript” you’ll find the code that makes this object work as intended. Don’t worry about trying to understand it all right now. We’re just looking for one specific thing: the element reference.
In this particular object, this ‘@balloon’ only appears once, but you might see it several times in other interaction examples. This tells the program which object within the page to work on. For instance, if you were to switch ‘@balloon’ with ‘@clown’, the box would instead release a bunch of smiling clown heads. You can see the result in the little animation below.
Now that we understand how to change element references, we can adapt any of these interactions to work in our site!
Creating custom interactions in a new webpage
Let’s see how we can modify these interactions to fit a new theme of a musician’s landing page. We’ll start with one of the examples from the 101 page: having something follow the mouse around.
We’ll need to change the clown to something more thematically relevant and have ‘pointerposition1’ reference that new thing so it will follow the mouse as expected. So let’s copy the ‘pointerposition1’ element over to our new page. Just right-click to copy and paste it over different browser tabs.
Next, we’ll create the object to follow the cursor around. For this example we used a music note. Just remember to give your object a recognizable name. You can do so in the design tab, at the top:
Now we let the code know which object we want to move instead of the clown. Open up the code for the “pointerposition1” element by clicking on the little lightning bolt.
Now notice that ‘@clown’ changed into a longer string of text. This default text happens because the code can’t find the “clown” object in our new page. We’ll replace the text highlighted above with ‘@note’ every time it shows up. The result should look something like this image below.
Let’s give it a spin! Press “preview” on the top right of the page to see the mouse follow in action. It should look like the animation below.
Triggering sound effects on click
For our last interaction, we’ll implement some new sound effects using the balloon popping interaction from the 101 project, as shown below.
We want a different sound effect to play, so we look at the code to see where we can edit that. Just the first line of code is enough to make the “balloon-pop” sound play. So let’s copy that single line.
We’ll place some instrument stickers into our page that we want to play a different sound when clicked. Remember to also add the sound effect files to the page itself, the same way you would add any other file. For each instrument, we’ll access its respective Interactions menu and paste that single line. Then we’ll reference the sound-effect object we want to play. Let’s do the keyboard as an example.
Clicking on this plus sign in the keyboard’s Interactions window allows us to define a new behavior for the object. Just paste that line of code from before and replace the name of the sound effect.
Now every time the keyboard is clicked, it’ll play a nice chord. We then repeat this for the rest of the instruments in the page. Try out the completed interactions here and feel free to remix the project with your own style and effects. We can’t wait to see what you create!