CSS Scroll-Driven Animations Builder

Scroll-Driven Animations let you tie CSS animations to scroll position instead of time. As the user scrolls, animation progress advances. No JavaScript, no IntersectionObserver, no GSAP — just CSS. There are two timeline types: scroll() (tied to a container's scroll position) and view() (tied to an element's visibility in the viewport).

animation-timeline is a CSS property that replaces the default time-based progression with a scroll-based one. Set it to scroll() to link the animation to a scroll container's position, or view() to link it to the element's position within the viewport. You can target specific scrollable ancestors with scroll(nearest) or scroll(self).

animation-range controls which part of the scroll timeline maps to the 0%–100% of the animation. With view(), you can use entry (element entering viewport), exit (leaving), or cover (fully covered). For example: animation-range: entry 0% entry 100% plays the animation as the element scrolls into view.

view() creates a timeline based on the element's visibility in the scroll container (by default, the viewport). The timeline starts when the element begins to appear and ends when it fully disappears. Combined with animation-range, you can trigger animations precisely as elements enter or exit the screen.

Use scroll() when you want an animation tied to scroll progress of a container — like a progress bar at the top of the page. Use view() when you want an element to animate as it becomes visible — like a card fading in as you scroll past it. For most 'scroll-reveal' effects, view() is what you want.