Collection 04
Scroll Animation Effects
Every demo here is driven by ScrollTrigger rather than a button. Tune a demo's parameters, press Apply settings to rebuild its trigger, then scroll through that demo to watch the configuration you chose. Pinning and horizontal sequences simplify to readable stacked layouts below 860px.
- 01Reveal
Scroll Reveal
Content animates in once as it enters the viewport, using a ScrollTrigger with once: true so it never replays on the way back up.
Enter once
Revealed on first approach
A one-shot trigger is the right default for editorial content — the reader sees the entrance once and is never re-animated.
Scroll to previewImplementation prompt
Updates as you adjust parameters.
- 02Scrub
Scroll Scrub
The visual is tied directly to scroll position through scrub, so the animation plays forward and backward as the reader moves.
Scroll-linked
Bound to the scrollbar
Scrubbed motion belongs to the reader — it advances exactly as far as they scroll and reverses when they scroll back.
Scrub markerScroll to previewImplementation prompt
Updates as you adjust parameters.
- 03Pinned
Scroll Pin
The stage holds still while its contents progress. Pinning is desktop-only; below 860px the panel simply scrolls past.
Pinned on desktop · stacked on mobile
Held in place
The stage waits for the reader
Pinning buys time for a single idea. Below 860px it is disabled so the page never feels stuck on a small screen.
Travelling markerScroll to previewImplementation prompt
Updates as you adjust parameters.
- 04Progress
Scroll Progress
A local readout reports how far the reader has moved through this demo. The figure is decorative and is never announced.
Local readout
How far through are we?
Progress values update continuously, so they stay decorative — assistive technology reads the static description instead.
A decorative percentage readout tracks scroll progress through this demo.
Scroll to previewImplementation prompt
Updates as you adjust parameters.
- 05Scrub
Scroll Scale
A supplied image grows between two configured scales as the reader passes, driven entirely by transform.
Scale on scroll
Growth tied to the scrollbar
Scaling between two bounded values keeps the image sharp and the motion predictable.
Scroll to previewImplementation prompt
Updates as you adjust parameters.
- 06Scrub
Scroll Rotate
A framed visual rotates through a configured angle as scroll progresses — transforms only, never layout.
Scroll to previewImplementation prompt
Updates as you adjust parameters.
- 07Scrub
Scroll Fade
Opacity is driven by scroll progress. The control is a friendly percentage that the builder converts to a 0–1 value.
Opacity ramp
Resolving as you arrive
Starting part-way visible keeps the content readable even if the reader stops mid-ramp.
Scroll to previewImplementation prompt
Updates as you adjust parameters.
- 08Horizontal
Scroll Horizontal
On desktop, vertical scroll drives a horizontal train of panels. Below 860px the train becomes an ordinary swipeable strip.
01 · Compliance
02 · Risk
03 · OperationsScroll to previewImplementation prompt
Updates as you adjust parameters.
- 09Pinned
Scroll Snap
Three labelled states snap into place on desktop. Snapping is deliberately not applied on small screens, where it fights the reader.
Snapping on desktop only
Intake completeAnalysis runningReport issuedScroll to previewImplementation prompt
Updates as you adjust parameters.
- 10Pinned
Pinned Story
A pinned panel moves through three narrative scenes. On mobile every scene is simply stacked and readable in order.
Scene 01
Define the question
A broad hypothesis narrows into one measurable endpoint.
Scene 02
Instrument the method
Controls and audit trails are fixed before the first data point.
Scene 03
Report without spin
Limitations are published as plainly as the results.
Scroll to previewImplementation prompt
Updates as you adjust parameters.
- 11Pinned
Pinned Image
The image holds while the explanatory copy scrolls alongside it. On mobile the image appears first, then the copy flows normally.
Held image
The evidence stays on screen
Keeping the scan fixed while the commentary moves lets the reader check each claim against the same image.
Scroll to previewImplementation prompt
Updates as you adjust parameters.
- 12Scrub
Image Sequence
Three stacked supplied frames cross-fade as the reader scrolls — a sequence built from real images rather than a canvas sprite.
Frame sequence
Three frames, one scroll
Cross-fading real images keeps the sequence accessible — each frame carries its own alt text.
Scroll to previewImplementation prompt
Updates as you adjust parameters.
- 13Scrub
Scroll Timeline
A multi-step timeline — eyebrow, heading, copy, metadata, call to action — is tied directly to scroll progress.
Sequenced by scroll
Each layer earns its moment
Tying a labelled timeline to scrub means the reader controls the pacing of the whole composition.
24Sites1.8kSubjectsScroll to previewImplementation prompt
Updates as you adjust parameters.
- 14Scrub
Scroll Color Change
The staged section moves through two clinical-lab colours as it scrolls. Only this stage changes — never the document background.
Staged colour
The panel changes, the page does not
Scoping the colour shift to one stage keeps the rest of the document stable and predictable.
Scroll to previewImplementation prompt
Updates as you adjust parameters.
- 15Scrub
Scroll Theme Change
The stage moves from a light theme to the dark lab theme, with text colour transitioning alongside so contrast holds at every point.
Theme ramp
Light to dark, contrast intact
Background and text transition together, so the copy never passes through an unreadable midpoint.
Scroll to previewImplementation prompt
Updates as you adjust parameters.
- 16Scrub
Scroll Zoom
A framed image zooms between two scales while staying clipped inside its frame.
Scroll to previewImplementation prompt
Updates as you adjust parameters.
- 17Scrub
Scroll Blur
The image resolves from blurred to sharp as the reader scrolls, animating the CSS filter only.
Optical resolve
Sharpening as you read
Filter animation is GPU-assisted and never touches layout, so the text above it stays perfectly stable.
Scroll to previewImplementation prompt
Updates as you adjust parameters.
- 18Scrub
Scroll Perspective
A framed visual rotates through a 3D perspective transform as scroll progresses.
Scroll to previewImplementation prompt
Updates as you adjust parameters.
- 19Progress
Scroll Progress Bar
A reading bar fills across this demo's own scroll range. It is local to the card and never becomes a fixed page-wide bar.
Local progress
A bar that belongs to this card
Scoping the indicator to one demo avoids a persistent page chrome element that would outlive the section.
Scroll to previewImplementation prompt
Updates as you adjust parameters.
- 20Progress
Scroll Section Indicator
A local section indicator tracks which stage is active. The current item is marked with aria-current, without any live announcements.
- Intake
- Analysis
- Report
The marker follows scroll position while the list itself stays static for assistive technology.
Scroll to previewImplementation prompt
Updates as you adjust parameters.