scroll-reveal
A gentle rise + fade as elements scroll into view. Part of
motion-anything; obeys MOTION-SPEC.md.
When to use it
- Long landing pages and stacked content sections.
- Giving a page a calm sense of pace.
When NOT to use it (restraint)
- Above-the-fold hero content the reader must see instantly.
- Revealing many elements simultaneously — stagger them, max ~3 at once.
How to apply
- Copy
scroll-reveal.cssandscroll-reveal.jsinto the project, and link them. - Mark elements:
<section data-reveal>…</section> <li data-reveal data-reveal-delay="80">…</li> <!-- optional stagger, ms --> - An IntersectionObserver adds
.is-inonce, when the element enters the viewport.
Accessibility & performance
prefers-reduced-motion: everything is shown immediately, no travel.- Animates
transform/opacityonly; unobserves each element after it reveals.
Framework notes
- React: render
data-revealattributes and run the init (or an equivalentuseEffect+ IntersectionObserver) after mount.