Scroll animations

With scroll animations, you control the animation by scrolling up and down. Because they aren’t time‑based, they progress as fast or as slowly as you scroll.

In the animation panel you’ll see three options when choosing a start or end animation. Select the third option to configure the animation for scroll.

Because it’s on scroll, you can set a percentage for where the animation will start or end within the viewport. After choosing a start percentage you can set the length in pixels of the animation. In this example it's set to 200 pixels.

The Top, Center, Bottom setting determines the reference point for triggering an animation's start based on the element's position in the viewport. (See the screenshot below) Specifically:

• Top: The animation begins when the top edge of the element enters the specified percentage of the viewport.
• Center: The animation starts when the center of the element reaches the specified percentage point.
• Bottom: The animation initiates when the bottom edge of the element hits the designated percentage of the viewport.

This setting allows for more precise control over when an animation is triggered during scrolling, enabling developers to create more nuanced scroll-triggered animations that start at different points relative to the element's position on the screen.

Updated on: 06/11/2025