This tutorial will help you create magical falling animations to add to your webpage. If you’re interested in floating animations, check out this tutorial here. At first glance, it may seem challenging or code-heavy to add falling animations to a webpage. However, we can easily add this effect in Hatch using our physics mechanics and custom interactions.
To get started, let’s pick an object to animate! Just drag any image you want onto your Hatch canvas. It’s most magical if you choose an object with a transparent background but you can try the effect with anything from our visual libraries.
How to animate dynamic falling objects in Hatch
To animate the behavior shown above, we’ll make use of both physics properties and custom interactions. Physics effects will direct the movement of the object, while an interaction will send it back up at the top once it’s done falling. We add physics properties through the ‘effects’ menu, found on the right sidebar after selecting any element.
Scroll down to the ‘physics’ section and pick ‘fall like a ball.’
With one click you’ve added physics effects and that’s all it takes to make an object to fall down the page. However, if you click preview, you’ll notice that the snowflake is falling very fast! We can fix this by lowering the gravity scale, also found under effects. Let’s slide it down to 10.
With the gravity set, our snowflake should fall at a reasonable speed. Of course, once the object reaches the bottom, the animation is over. To make it repeat, we’ll have to send it back to the top, so it can fall again. To achieve this we’ll use custom interactions. Select the object once more and add an interaction through the right sidebar, like we did before with effects.
Set up an interaction for a falling animation
A little window will appear asking us to select a trigger. We set the condition here with the trigger for the interaction to take place. The trigger we want is not in this window, so let’s pick ‘view all triggers’.
Now a list of available triggers will pop up. Under the ‘collision’ section you’ll find ‘physics collision starts’.
With this trigger we are telling the editor to start the interaction once our snowflake hits something on its way down. But right now it doesn’t hit anything, it just keeps falling down the page. Let’s fix that!
Adding a collision floor to our falling animation
Here we’ve created a big line that we’ll use as our collision floor. To make one, click on basic elements and then scrolling down to shapes, as shown above.
After resizing the line, place it under the visible border of your page. Notice how there’s a blue rectangle in the middle of the editor? Set objects outside of that blue rectangle to keep them out of sight. Another option is to set the opacity of the line to zero (0). With the box transparent, you can have it anywhere on your canvas.
There’s one more thing to make this floor work for us- we need to add physics properties to it! We’ll do it the same way we added the falling behavior for our snowflake before, but we’ll pick stationary instead.
When the snowflake comes in contact with the line, we want to trigger our so let’s go back to the snowflake’s interaction to finish setting that up.
Sending the object back to the top of the page
First we’ll have to configure our trigger block. We want the interaction to activate only when the snowflake collides with our floor. So we’ll change that particular setting over here at the bottom:
Now we set up the interaction to send the snowflake back to the top once the trigger is activated. To do this we’ll use the ‘change object properties’ block, like this:
After adding the block, we click on it to configure it. On choose a property, we pick ‘y’ because that property defines the object’s vertical position. We set it to ‘-150’, which places the object above the upper border of our page, ready to fall down the page again!
Click the preview button, you’ll see the snowflake falling time and time again down the page. Our falling animation is complete!
To create a similar effect as the one shown at the start of this tutorial, duplicate the snowflake several times. Also slightly changing the gravity scale and overall size of each one makes it look more unique. We also added spin to them, which is also under the available effects.