The Scrollytelling element lets you sync background transitions to the user’s scroll, creating layered visual stories where images, videos, or colors change as your audience reads through your content.

It’s built for product walkthroughs, editorial long-reads, step-by-step guides, and data stories — any layout where the visual context needs to shift while the reader stays in the same section.

How It Works

The element has two layers: a background layer for the visuals that transition on scroll, and a foreground layer for content like text, buttons, and interactive graphics. You build each layer separately, and the element handles the scroll-synced background transitions.

• Background: Enter Edit Mode, add blocks, and insert your visuals.
• Foreground: Place content directly on the main canvas, on top of the component.

Transition Effects

Choose from seven transition types to control how backgrounds animate into view:

• Horizontal scroll — slides content horizontally
• Fade — fades blocks in or out
• Reveal — slides in from a direction
• Stack — stacks blocks on top of each other
• Mask — reveals through a shape like a circle or square
• 3D — flips content with a 3D effect
• None — no transition between blocks

Each type has its own settings, like direction, blur, and zoom. Set the speed with a single dropdown: Smooth, Slow, Medium, Fast, or Snappy.

Mix Effects Across Blocks

Set a default transition and speed for the whole element, then override individual blocks to mix effects throughout your story. Open with a fade, transition through a stack sequence, and close with a mask reveal — all within the same element.

Get Started

See our tutorial video or read the help article to learn how to use the Scrollytelling element.