Play animation on viewport enter
This article covers the settings of 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, it is clicked on or hovered over, it enters the viewport on scrolling, etc.).
By default, the animated element is configured as the trigger but you can also set up any other element, section or a custom class to serve as the trigger.
In the example below, the blue square is animated, the viewport center is set as the intersection line.
If you specify the square as the trigger, then the animation of the square starts playing when the square crosses the viewport center.
If you select the circle as the trigger, then the animation of the square starts playing when the circle crosses the viewport center.
You can specify only one element, section or a custom class as the trigger to play animation On viewport enter.
Intersection line
An intersection line is the top border, center or bottom border of the viewport. When a trigger element crosses the intersection line with its top, the animation starts playing.
NOTE
The viewport height varies across different types of devices.
The viewport height varies across different types of devices.
Use the Offset from intersection line 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 select the 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 of let's say --20%, then the intersection line will shift up by 20%.
On disappearing from viewport
Here you can set up what happens to animation after playing.
Do nothing
The animation triggers and the animated element remains in the state of the last step until the page is refreshed.
The animation triggers and the animated element remains in the state of the last step until the page is refreshed.
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.
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.
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 in the reverse order, to the initial state.
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 in the reverse order, to the initial state.
Reset to start
After playing the animation, the animated element remains in the state of the last step. If you return to the beginning of the page, the animated element vanishes and the animation triggers again when the element crosses the intersection line.
After playing the animation, the animated element remains in the state of the last step. If you return to the beginning of the page, the animated element vanishes and the animation triggers again when the element crosses the intersection line.
Number of replays
By default, any animation you create plays only once. You can also set up several replays and loop the steps.
The example below shows some variants of setting up the replay.
Animation direction
The animation can be played in two directions:
Normal
The animation is played from the initial to the final state.
The 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 plays in reverse order.
After playing the animation, the animated element returns to the initial state while the animation plays in reverse order.