Articles on: The Pro editor

Scroll animations

Scroll animations let you control when and how elements animate based on scroll distance. Unlike timed or viewport animations, they progress as fast or as slowly as you scroll, giving you precise control over the pacing.

Setting up a scroll animation

You'll find scroll animations under Start animation or End animation in the animation tab. Select the “scroll” option to configure one.

You'll see the following options:

  • Start: The viewport percentage where the animation begins. 0% is the bottom of the viewport, meaning the animation starts as soon as it comes into view. 100% is the top.
  • Length: The scroll distance over which the animation plays in pixels, percentages or while sticky
  • Type: The animation style (e.g., fade, move, scale).
  • Easing: How the animation accelerates, decelerates or stays constant.
  • Direction: The direction of the movement (if applicable).

Trigger point

Next to the starting point, you can choose which part of the group or element triggers the animation:

  • Top: The animation starts when the top edge of the element reaches the specified viewport percentage.
  • Center: The animation starts when the center of the element reaches that point.
  • Bottom: The animation starts when the bottom edge reaches it.

This is useful when you want more control over exactly when an animation kicks in, especially for taller elements.

View a live demo page here →

Scroll animations on groups

When you apply a scroll animation to a group, all children with an active start/end animation inside that group inherit the scroll animation type. Their individual animation distances are calculated as a percentage of the parent's total scroll distance.


ExampleIf a group has a scroll distance of 200px and contains two elements animating in sequence, each element gets 100px (50% of the parent).


This means you can choreograph multiple elements within a single scroll distance, but keep in mind that children can't exceed the parent's total distance.


Combinations with sticky positioning

If an element is set to sticky, several additional options become available:

  • Start relative to sticky postion: Animation start can be set relative to the sticky position (i.e. before an element becomes sticky sticky or when stick positioning ends)
  • Match scroll distance to “while sticky”: You can match the scroll animation to the sticky distance and determine the animation’s start by its sticky poss. This keeps the animation in sync with how long the element stays fixed on screen.

This is especially useful for elements that should animate while pinned in place. To use this, you’ll need to enable sticky on the group or element itself



Related updates:



Updated on: 07/01/2026