Play animation on scroll
This article covers the settings of 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, 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 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 the circle crosses the viewport center.
You can specify only one element or section as the trigger to play animation On scroll.
Intersection line
An intersection line is the top border, middle or bottom border of the viewport. When a trigger element crosses this border with its top, the animation starts playing
NOTE
The viewport height varies across different types of devices and screen sizes.
The viewport height varies across different types of devices and screen sizes.
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
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%.
Play time
Sync with scroll
After triggering, the animation doesn't play till the end automatically, but directly depends on the location of the user scrolling through the page.
After triggering, the animation doesn't play till the end automatically, but directly depends on the location of the user scrolling through the page.
Play step-by-step
When a user reaches the intersection line, the animation starts and automatically plays steps depending on the distances set up for each step.
When a user reaches the intersection line, the animation starts and automatically plays steps depending on the distances set up for each step.
Smoothing
This setting helps to smooth the animation steps. The bigger is the smoothing value, the smoother animation plays.
High smoothing values make animation more seamless.
Fix on scroll
This option goes with the Sync with scroll setting. On scrolling, the animated element sticks to the position it was in when the intersection line was crossed, that is at the start of animation play.