Scrolling Animations

Scrolling animations tie an element's appearance to the scrollbar: as the visitor scrolls,
the element moves, fades, rotates, scales, blurs, or changes color in lockstep with their
progress. Unlike an entrance animation, which plays
once when the element comes into view, a scrolling animation is driven by scroll position —
scroll down and it advances, scroll back up and it reverses. It's the tool for parallax
movement, scroll-linked fades, and depth effects.

Enabling a scrolling animation

1. Select the element you want to animate.
2. In the properties panel, click the play icon to open the Animations tab.
3. Expand the Scrolling Animation section and turn on Enabled.

Enabling reveals eight animatable properties — Horizontal Position, Vertical Position,
Opacity, Blur, Rotation, Scale, Color, and Background Color — plus an Advanced section.
Each property opens its own popout, and you can combine as many properties as you like on
one element; each runs on its own keyframes and trigger range.

How the keyframes work

Every property popout has the same anatomy: Start, Middle, and End values, and
a Trigger range.

The element animates from the Start value to the End value across the trigger range,
passing through the Middle value (if set) at the halfway point. You don't have to fill in
all three:

• Start + End — animates between the two values. The example above moves the element
  from 100px below its natural position to 100px above it as the visitor scrolls.
• Start + Middle + End — a three-step sequence; useful for effects that go out and
  come back, like fading out mid-scroll and back in.
• Start only — animates from the Start value to the element's normal appearance.
• End only — animates from the element's normal appearance to the End value.

The animatable properties

Property	Values	Notes
Horizontal / Vertical Position	−200px to 200px (type any value)	Offset from the element's natural position.
Opacity	0 to 1	0 is invisible, 1 fully opaque.
Blur	0 to 100	Gaussian blur, in pixels.
Rotation	−360 to 360	Degrees; negative rotates counter-clockwise.
Scale	0 to 5	1 is natural size.
Color / Background Color	any color	Text color and background color.

The Trigger range

The Trigger slider controls which part of the element's journey through the viewport
the animation is mapped to. By default the range is the full journey: the animation starts
when the element's top edge enters at the bottom of the viewport and finishes when its
bottom edge exits at the top. (That journey is measured against the viewport by default —
the Relative To setting in Advanced changes what the Trigger range tracks.)

Dragging the handles narrows that window. Pull the left handle up and the animation won't
start until the element is already partway up the screen; pull the right handle down and it
finishes before the element reaches the top. A narrower window concentrates the whole
animation into a shorter stretch of scrolling, which reads as a faster, snappier effect.

Each property has its own Trigger range, so different properties can play over different
parts of the journey.

Advanced options

• Ease — shapes how progress is distributed between keyframes. The default is
  Linear, which keeps the animation perfectly proportional to scroll — usually what you
  want for parallax. Choosing a curve (Power, Expo, Back, Elastic, Bounce, each In/Out/
  InOut) makes the value change faster in one part of the range and slower in another.
• Scrub — by default the animation is locked 1:1 to the scrollbar. Setting a Scrub
  time (100–2000ms) lets the animation lag behind and catch up smoothly over that duration,
  which softens jittery scrolling into a fluid glide.
• Transform Origin — the anchor point for Rotation and Scale, set with the grid or
  exact percentages. Rotating around top left looks very different from the default
  center.
• Relative To — what the Trigger range is measured against:
  • Viewport (default) — the element's own journey through the viewport: the Trigger
    range spans from the element entering at the bottom to leaving at the top, as
    described above.
  • Page — overall page scroll: the Trigger range spans from the top of the page to
    the bottom, regardless of where the element sits. Good for elements that are always
    on screen, like a fixed header that tints as you read.
  • Custom — another element's journey through the viewport, specified with a CSS
    selector in the Custom Selector field that appears. Use it to animate a fixed or
    sticky element based on a section scrolling past.
• Disable At — turn the animation off at a breakpoint and below. The element simply
  displays normally there.
• Debug — overlays scroll-trigger markers on the page showing exactly where the
  animation starts and ends. Turn it on while tuning trigger ranges, off before publishing.

How it behaves on the live site

• The animation is bidirectional: scrolling back up runs it in reverse. There is no
  play-once mode — position on the scrollbar, not time, determines what you see.
• If the visitor's operating system has reduced motion enabled, the animation is
  skipped and the element displays normally. (Unlike entrance animations, nothing is
  hidden while waiting to animate — a scrolling animation that never runs just leaves the
  element as designed.)
• The animation plays live in the builder canvas — scroll the canvas to watch it run as
  you tune values.
• Scrolling, entrance, and sticky settings live side by side in the Animations tab and can
  be combined on one element.

Tips