This Hatch tutorial walks through the process of putting floating animations on a webpage. We’ll make our objects float up and down in the page as if they were suspended in the air. And we’ll do it with an easy, no-code approach! Just follow these instructions and watch your page come to life!
To begin making a simple animation in the Hatch editor, let’s open up a blank project. Go to hatch.one and click the ‘new project’ button on the top right. On the separate window that shows up, click the ‘blank page’ button at the bottom, as shown below:
Now we need something to animate! Let’s add an object by dragging any image file into the page. We recommend picking an image with a transparent background, but anything will work for our purposes.
Click the object to select it and the right sidebar will change to reflect the object’s properties. Since we’re making an animation, we’ll want to look at the interactions section at the top. We aren’t using code for this tutorial, so we’ll use the visual scripting feature.
Add interactions to create floating animations on a webpage
Let’s add an interaction of this kind by pressing the ‘+ button’ as shown below.
Next, click on the yellow create interaction button to open a window with a wide selection of triggers. For our animation to happen, we’ll set the conditions here.
We want our seagull to start floating as soon as the site is loaded, so we’ll choose ‘page load’.
After choosing a trigger, once again you’ll see a new list with a lot of options. These are the blocks that will dictate how the object is animated.
Let’s think about the floating animation we want to create. To make it look like the object is floating we’ll have to first move it up, then move it down, and then repeat these actions continuously. So basically we’re looking for some sort of loop. If you look at the bottom of the list you’ll find the ‘repeat or loop’ block.
Clicking a block will add it to the list on the left. After the trigger (in this case, when the page loads), the blocks will be activated from top to bottom.
First let’s configure our repeat block so that it will loop the floating movement continuously, instead of two times. Just click ‘repeat forever’ to make the loop endless.
See where it says ‘add a block to repeat’? That’s where we’ll place the core actions of our animation. Clicking that yellow area will once again bring up the block list.
Setting up a looping animation
Whatever blocks we put in here will be looped, so let’s get started with the movement! The ‘move’ block (previously shown as “nudge”) is perfect for this, as it will let us move the object in a set direction. Let’s select it and then configure it, like so:
Let’s check out what each option does.
The object will travel a set distance across the page, towards the direction selected in the field below.
The bottom section handles the animation. A higher duration means the object will take longer to reach its destination. So it will move more slowly through the page.
We recommend using ‘Ease In’ as your main ease setting because it’s a nice fit for a floating animation.
Now we have our ‘move upwards’ block in place. We need to follow it up with a ‘move downwards’ block, but wait!
We have to make sure the seagull finishes its upwards movement before it starts going downwards. Otherwise the two actions would overlap! Use the ‘wait for…’ block to avoid this.
Let’s add one of these blocks. You can configure it to ‘wait for blocks to finish’ which is what we’re looking for. But you can also set it to wait for a certain duration.
Reversing the direction
Afterwards we’ll follow with another move (“nudge”) block as planned. But you don’t need to configure it from scratch! You can simply copy the existing block and drag it to the bottom of the block list, like so:
All we had to do was switch the direction to down. And now we have a working flotation animation on a webpage! Hit preview on the top right and let’s see it in action! We ended up tweaking the block values a bit until we were satisfied with the animation. Here’s how it turned out:
