Scroll animation can turn a long page into a story, or make it feel slow and heavy. Good effects follow your hand, never lock the page and leave content readable at every point. Scroll each one up and down quickly to test it. Install one with a single command, and always respect reduced motion. Keep the effect tied to the content it explains.
Scroll animations tie motion to the page's scroll: content that fades or slides in as it enters view, sections that pin while their contents change, parallax layers moving at different speeds and progress that fills as people read.
Animate opacity and transform only, start reveals early so nothing appears to pop in late, and never hide content that someone needs if the script fails. Prefer CSS scroll driven animations where they're supported, and respect reduced motion settings by showing everything at once.
Frequently asked questions
Watch elements with an IntersectionObserver and add a class or start an animation when they enter view. Motion's whileInView and useScroll hooks do the same with less code.
A CSS feature that links an animation's progress to scroll position or to an element's visibility, using animation-timeline with scroll() or view(). It runs without JavaScript in browsers that support it.
Start the element slightly transparent and a few pixels lower, then animate both to normal when it enters the viewport. Trigger it once, not every time it scrolls back into view.
Move background layers at a fraction of the scroll speed with transforms, either from a scroll listener throttled to animation frames or a scroll driven animation. Keep the offset small so text stays readable.
Not when content is in the HTML and only its appearance animates. Problems come from content rendered only after scrolling, or from animating layout properties that force the page to reflow.
Make the section sticky inside a taller container, then map scroll progress through that container to which step is shown. This gives scroll stories without hijacking the scrollbar.
Only with care. Libraries that smooth scrolling can feel heavy, break find in page and fight trackpads. Native scrolling with scroll driven effects is safer for most sites.
