Articles on: The editor

Scroll path animations

A scroll path animation moves an element along a path you set with keyframes, driven by the visitor's scrolling. When the visitor scrolls down, the element moves forward along the path; when they scroll up, it moves back. Scroll path animations are only available in Longpage scenes.



Adding a scroll path animation


To add a scroll path animation to an element in a Longpage scene:


  1. Open a Longpage scene in the editor.
  2. Select the element you want to animate.
  3. In the right panel, open the Element tab, then the Animations sub-tab.
  4. Click the Scroll path animation heading to turn the animation on.
  5. Choose a Start position and a trigger position (Top, Center or Bottom of the element) to set when the animation begins.
  6. Click Edit animation to open the keyframe editor.
  7. Set Page position is: to Ending to make the element move along the path into its place on the canvas, or to Start to make it start at its place and move away. Ending is the default.
  8. Click + under Frames to add a frame.
  9. Move, resize or rotate the element on the canvas for that frame, or enter the values under Selected frame.
  10. Repeat steps 8 and 9 for each extra point on the path.
  11. Optional: drag the markers on the path to curve it.
  12. Click Save in the Keyframe animation mode bar to keep the animation, or Cancel & exit to discard your changes.


Scroll path animation settings


The Scroll path animation block in the Animations sub-tab has these settings:


  • Start: a position on the visitor's screen, from 0% to 100% in steps of 10%. The animation starts when the chosen part of the element reaches this position. Hover over a Start option to see that position as a line on the canvas.
  • Trigger position: the part of the element that triggers the animation: its Top, Center or Bottom. In the block it's the icon menu next to Start.
  • Edit animation: opens the keyframe editor, where you build the path.


The keyframe editor has these settings for the whole scroll path animation:


  • Page position is: decides where the element's position on the canvas sits on the path. With Ending, the path ends at the element's place on the canvas, so the element moves into place as the visitor scrolls. With Start, the path starts at the element's place on the canvas, so the element moves away from it. In the Frames row, C is the element's place on the canvas.
  • Auto rotate: turns the element so it follows the direction of the path. When it's on, use Rotation angle (0° to 360°) to add a fixed angle on top of that.
  • Start and Trigger position: the same settings as in the Scroll path animation block, so you can change when the animation begins without leaving the keyframe editor.


Each frame on the path has its own settings under Selected frame:


  • X and Y: the element's position.
  • Rotation: the element's angle.
  • W and H: the element's width and height. These aren't available for text and groups, or for elements set to fill the full width or height of the screen.
  • Acceleration and Delay: how the element moves towards this frame.
  • Frame effects: effects applied to the element at this frame.
  • Reset size: sets the frame back to the element's size on the canvas.
  • Remove frame: deletes the selected frame after you confirm. You can't remove a frame when it's the only frame on the path; turn the scroll path animation off if you don't want to use it.


Scroll path animation limitations


  • Scroll path animations are only available in Longpage scenes. The scene type is set separately for the desktop and mobile layouts, and scenes on the mobile layout are Longpage by default.
  • An element can't have a scroll path animation and a Start animation, Repeating animation or End animation at the same time. While the scroll path animation is on, those three are disabled. While any of them is on, the Scroll path animation block is disabled.
  • Elements with a Screen border position and Sticky turned on can't have a scroll path animation.


Frequently asked questions


Why can't I find the Scroll path animation block?


The Scroll path animation block only appears in Longpage scenes. If your scene has a different type, the block isn't shown in the Animations sub-tab. To change it, open the General tab in the right panel and set Scene type to Longpage. The scene type is set separately for the desktop and mobile layouts. On the mobile layout, scenes are Longpage by default, so the block is usually there even when the desktop scene has a different type.


Why is the Scroll path animation block greyed out?


The Scroll path animation block is disabled when the selected element already has a Start animation, Repeating animation or End animation, or when the element has a Screen border position with Sticky turned on. Turn off the other animation, or turn off Sticky for the element's Screen border position, to use a scroll path animation.


Can I combine a scroll path animation with a start animation?


No. An element can have either a scroll path animation or Start animation, Repeating animation and End animation settings, not both. While the scroll path animation is on, the other animations are disabled.


Where is the parallax setting?


Parallax is an element effect, not a scroll path animation. Select the element, open the Element tab in the right panel, then the Effects sub-tab, and use the Parallax block, which has Acceleration and Damping settings. See Element effects.

Updated on: 16/10/2026