Scroll Animation CSS Previewer

How the Scroll Animation works

Scroll animation CSS: reveal on scroll

There are two ways to animate things on scroll, and they feel different. Play once when visible is the classic pattern: the element starts hidden, a script watches for it to enter the viewport, and when enough of it is showing the script adds a class that transitions it to its final state. The animation runs at its own speed once triggered and never runs again, which suits content sections, cards and feature lists. The snippet uses IntersectionObserver, which is cheap and does not fire on every scroll event, and it stops observing each element after it has revealed so nothing keeps running in the background.

Scrub with scroll position ties the animation's progress directly to the scrollbar using animation-timeline: view(). Scroll down a little and the element moves a little; scroll back up and it reverses. There is no JavaScript at all, and because the browser drives it on the compositor it stays smooth even on busy pages. The animation-range line says which part of the element's journey through the viewport maps to the animation: entry 0% is the moment its top edge appears at the bottom of the screen, and entry 100% is when the whole element has entered. The trigger point slider shortens that range so the reveal finishes sooner. Support is still growing, so the output includes a @supports guard that turns the animation off where the timeline property is unknown, leaving elements plainly visible rather than stuck hidden.

The trigger point means slightly different things in each mode. For the observer it is the threshold, the fraction of the element that must be on screen before it plays; 30% is a good default because it fires while the element is still low on the page, so the motion is noticed. For the scrubbed version it is the point of entry at which the animation reaches its end state.

Keep travel distances modest, around 20 to 60 pixels, and durations under a second. Large movements on every section make a page feel slow to read. The once-only snippet also respects prefers-reduced-motion by showing everything immediately for users who have asked for less animation, and the scrubbed version can be wrapped in the same media query if you want the same courtesy there.

Related tools