Scroll animations

Scroll animations tie an element's start or end animation to the scroll position: the animation plays over a set scroll distance, as fast or as slowly as the viewer scrolls. Timeline and viewport animations, by contrast, play over a fixed duration once they start.

Setting up a scroll animation

To set up a scroll animation, choose the Scroll trigger in the Start animation or End animation block of the Animations tab. The Scroll trigger is only available when the scene type is Longpage in the layout you are editing. The scene type is set separately for desktop and mobile, so the trigger can be available in one layout and not in the other. When the scene type is not Longpage, the trigger choice is not shown.

1. On a Longpage scene, select the element or group you want to animate.
2. Open the Animations tab in the right panel.
3. Switch on Start animation or End animation.
4. Choose Scroll as the trigger, next to Timeline and Viewport.
5. Choose a Start percentage.
6. In the dropdown next to Start, choose the trigger position: Top, Center or Bottom.
7. Under Length, choose px or % and enter the scroll distance. For sticky elements, While Sticky is also available (see the section on syncing scroll animations with sticky elements).
8. Choose the Type, then adjust Easing and Direction if they are shown.

Scroll animation settings

With the Scroll trigger selected, the Start animation or End animation block shows these settings:

• Start: The line in the viewport where the animation begins, from 0% to 100% in steps of 10%. 0% is the bottom of the viewport and 100% is the top. A start animation defaults to 0% and an end animation to 100%.
• Length: How far the viewer scrolls while the animation plays. Choose px for an exact distance in pixels (200 by default), % for a percentage of the screen height, or While Sticky to play the animation for as long as a sticky element stays in place.
• Type: The animation style, for example Fade, Move or Zoom.
• Easing: How the animation speeds up, slows down or keeps a constant pace.
• Direction: The direction the animation comes from or goes to. It is shown only for some types, such as Move, Fade and Blur.

Choosing the trigger position

The trigger position sets which part of the element must reach the Start line for a scroll animation to begin. Choose it in the dropdown next to Start in the Start animation or End animation block:

• Top (default): the animation starts when the top edge of the element reaches the Start line.
• Center: the animation starts when the center of the element reaches the Start line.
• Bottom: the animation starts when the bottom edge of the element reaches the Start line.

With Start at 0% and the trigger position Top, the animation starts as soon as the element scrolls into view. With Center, half of the element is already visible when the animation starts. With Bottom, the whole element is already visible. The difference is largest on tall elements.

View a live demo page here →

Scroll animations on groups

When a group's start animation uses the Scroll trigger, every element inside the group with its own start animation switched on follows the group's scroll trigger. The same applies to a group's end animation and its children's end animations. Each child keeps its own animation type. The child's panel shows "Animation trigger on parent group." instead of its own trigger, Start and Length settings.

The group's scroll length is shared among its children according to their timing on the timeline. Each child's animation plays during the part of the group's scroll length that matches its position and duration on the timeline. All child animations play within the group's scroll length.

The example assumes the two animations have equal durations on the timeline.

To animate a group's children over one scroll distance:

1. Select the group and open the Animations tab.
2. Switch on Start animation or End animation and choose Scroll.
3. Set Start and Length on the group. If the group itself should not move, choose Animate children as the Type.
4. Select each child, switch on the same block (Start animation or End animation) and choose its Type.
5. Set the order and duration of the children's animations in the timeline.

Syncing scroll animations with sticky elements

A scroll animation on a sticky element can start relative to the moment the element becomes sticky or stops being sticky, and can run for exactly as long as the element stays in place. These options appear only when the animated element itself is sticky: it must use Free position with Sticky switched on. Sticky can only be switched on for elements placed directly on a Longpage scene, not inside a group. For more on positioning, see Alignment options.

1. Select the element and, in the Position element settings, make sure it uses Free position with Sticky switched on.
2. Open the Animations tab, switch on Start animation or End animation, and choose Scroll.
3. Under Start, choose On sticky position instead of On percentage.
4. In the dropdown that appears, choose Before sticky start, On sticky start, Before sticky end or On sticky end.
5. To play the animation for exactly as long as the element stays sticky, choose On sticky start and set Length to While Sticky.

Some Length units depend on the sticky start you choose:

• While Sticky can only be selected when the start is On sticky start.
• % is not available when the start is Before sticky start or Before sticky end.

Frequently asked questions

Why can't I see the Scroll option for an animation?

The Scroll trigger for start and end animations is only available when the scene type is Longpage in the layout you are editing. Desktop and mobile each have their own scene type, so check the layout you are working in. When the scene type is not Longpage, the Start animation and End animation blocks don't show the choice between Timeline, Viewport and Scroll.

Why are Start animation and End animation greyed out?

The Start animation and End animation blocks are greyed out when the element has a Scroll path animation switched on. Switch off the scroll path animation to use start and end animations.

Why can't I select While Sticky as the Length?

While Sticky is only available when the animated element uses Free position with Sticky switched on, and the scroll animation's Start is set to On sticky position with On sticky start. Elements inside a group can't be made sticky, so they don't get this option.

What does % mean in the Length of a scroll animation?

A Length in % is a percentage of the screen height. For example, 100% means the animation plays while the viewer scrolls one full screen height.

What is the difference between a scroll animation and a scroll path animation?

A scroll animation is a start or end animation, such as a fade or move, that plays over a set scroll distance. A scroll path animation is a separate animation setting that moves an element along a longer path as the viewer scrolls. An element can't use both at once: while a scroll path animation is on, its start and end animations are greyed out.

Related updates:

• 07/01/2026 | New scroll animations and a redesigned timeline

Updated on: 19/10/2026