Play animation on viewport enter

Read this article to learn how to set playing animation On viewport enter.

Element for trigger

A trigger is an element that starts playing animation when a certain event happens to it. For example, a visitor scrolls down to / clicks on 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 trigger to play animation On viewport enter.

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%.

On leaving viewport

Here you can set up what happens to animation after playing.

Play back

After playing the animation, the animated element remains in the state of the last step. On further scrolling, when the element crosses the intersection line again, the animation replays backwards, to the initial state.

Replay

After playing the animation, the animated element remains in the state of the last step. On further scrolling, when the element crosses the intersection line again, the animation replays from the initial state.

Reset to start

After playing the animation, the animated element remains in the state of the last step.

If a visitor goes back to the above-the-fold, the animated element vanishes from view. The animation triggers again when the element crosses the set intersection line.

Do nothing

After playing the animation, the animated element remains in the state of the last step until the page is refreshed.

Number of replays

By default, any animation plays only once. You can also set up several replays or loop the steps.

The video below shows some variants of how to set up replay.

Animation direction

Animation can play in two directions:

• Normal - Animation is played from the initial to the final state.
• Bounce - After playing the animation, the animated element returns to the initial state while the animation is playing backwards.