Play animation on scroll

Read this article to learn how to set playing animation On scroll.

Element for trigger

A trigger is an element that starts playing animation when a certain event happens to it. For example, a visitor clicks on / hovers over it, or when it enters the viewport on pagescroll, etc.

By default, every animated element is set as its own trigger but you can also configure any other element(s), section or custom class to serve as the trigger.

Let's animate a blue square, and set viewport center as the intersection line.

If we choose the square as its own trigger, then animation of the square starts playing when it crosses the viewport center.

If we choose the circle as the trigger, then animation of the square starts playing when the circle crosses the viewport center.

NOTE

You can set only one element or section as the trigger On scroll.

Intersection line

The top border, center or bottom border of the viewport can serve as an intersection line. When a trigger element crosses the set intersection line with its top, your animation starts playing.

NOTE

Keep in mind that viewport height varies across different types of devices.

Use the Offset from intersection line option to give the precise position on the page where the animation should trigger. The offset is specified as the percentage value of the user's viewport height, so it is a relative value.

For example, you can choose viewport center as the intersection line. If you set a 20% offset, then the intersection line will shift down by 20%. If you give a negative value, such as -20%, then the intersection line will shift up by 20%.

Play time

Sync with scroll

After triggering, the animation doesn't play till the end automatically, but directly depends on the location of a user scrolling through the page.

Play step-by-step

When a user crosses the intersection line, the animation starts and automatically plays steps depending on the distances set up for each step.

Smoothing

Use this setting to smooth animation steps. The bigger is the set value, the smoother your animation is playing.

NOTE

High smoothing values make animation more seamless.

Fix on scroll

This option goes with the Sync with scroll setting.

Swithc on the toggle, to make your animated element stick to the position it was in when a user crossed the intersection line, that is at the start of animation.