In this tutorial, we’ll walk you through our no-code appear effects, which make it possible for an object to appear or be revealed. These effects trigger when the object comes into view, either on scroll or when the page loads. You can easily set something to appear on scroll by adding a little animation on the object through Hatch’s no-code visual scripting.
The appear function lets you quickly implement features such as fade in effects, motion effects and scaling effects. Catch the viewer’s eye with these short animations and make your webpage more engaging. With Hatch’s no-code webpage builder, these effects are very easy to set up.
Add an appear on scroll effect to your object
Open one of the templates in Hatch’s featured templates gallery. For this tutorial we picked the Marketing Agency template.
Scrolling down the page, you can see it’s mostly made up of static images, so it’s a perfect candidate to for appear effects. Let’s begin by clicking on ‘remix this’ at the top right of the page.
Once we’re in the editor, let’s look for an object to animate! Let’s begin with the slideshow that shows up under the header. To add an appear effect, we first need to select the object and inspect the right sidebar.
As shown above, we add a new effect by clicking on the plus sign. From the available options we’ll pick ‘appear.‘
Now let’s configure the effect. The first option that shows up is the trigger, which is the condition that needs to be met for the effect to be activated. You can pick between ‘when scrolled to’ and ‘when page loads’.
For this kind of site, where viewers scroll down the page, we’ll pick when scrolled to. That’s gonna be it for our first test! Now click preview and watch the slideshow fade into the page.
Customizing an appear effect
The Fade in effect shown above is just one of the uses of the appear function. Next, let’s try out some different options!
Scrolling further down the page, now we’ll work on the ‘Services’ section. Let’s select the ‘Digital Marketing’ container and add an appear effect to it. If you’re following along, be careful not to select the elements inside it, just the container itself.
Let’s take a look at the options for the appear effects.
Since we already covered the ‘trigger’ option at the top, let’s go to the next one.
Start at is only available if ‘when scrolled to’ is selected. It determines how far the user needs to scroll down for the trigger to activate. The first three buttons from the left are presets for this setting.
For example, if you press the first button, the effect will play as soon as the top of the object comes into view. But if you press the third one, the effect will wait until the object is fully visible. Finally, the fourth option lets you select a custom percentage of much of the object is visible to activate the effect. For this example, we’ll pick the third button.
Customizing animation settings
The animation setting lists the available effects that can play on activation. ‘Fade in’ is selected by default, and it’s what we tried last time. The sliding effects will make the object appear from that direction, with a fade in included. Lastly, ‘scale in’ will make the object start small and grow until it reaches its actual size. Let’s pick slide in from left.
If you turn the ‘animation duration’ slider to the right, it will take longer to finish. So you’ll end up with a slower effect. Let’s leave it as it is for now.
Finally, delay is the time between the trigger activation and the effect. Normally it’s set to 0, but you can make the object appear later if you increase this value.
Now that we’ve changed the settings, you can see it in action below!
Practice and stylize your own ‘appear on scroll’ effects with the Marketing Agency template! We can’t wait to see what you create!