Respects prefers-reduced-motion: the animation is disabled and the final state is shown.
What is a Scroll Reveal?
Scroll reveal ties motion to scroll position: a panel slides and fades as it passes through the viewport. The modern way is native CSS scroll-driven animation (animation-timeline: view()), which runs on the compositor with zero JavaScript. Use a short range so the effect lands near the element, not across the whole page.
Animation Specimen
Trigger
scroll
Tech
scroll-driven
Duration
2.6s
Easing
cubic-bezier(0.16, 1, 0.3, 1)
Performance
transform, opacity
When to use
Long-form sections, feature blocks, story pages
Any scroll-linked reveal where JS would be overkill
Avoid when
Above the fold — scroll-linked motion there never triggers
When you need scrubbed precision JS gives but CSS lacks
Native scroll-driven animation needs no scroll listener and stays on the compositor — but add an @supports fallback for older browsers.