Scroll Timeline Playground - Online Scroll‑Driven Animation

CSS scroll‑driven animations allow you to link animation progress directly to scroll position. Instead of time‑based keyframes, the animation advances as the user scrolls — creating parallax effects, reveal animations, scroll‑linked progress bars, and more. They use animation-timeline: scroll() or animation-timeline: view() instead of traditional time‑based timelines.

scroll() links animation progress to the scroll offset of a scroll container (root, nearest ancestor, or self). It's great for progress bars or sticky headers.
view() links animation progress to an element's visibility within its scroll container's viewport — perfect for reveal‑on‑scroll effects, entrance animations, and cards that animate as they come into view.

animation-range defines where the animation starts and ends within the scroll timeline. You can use named ranges like entry, exit, cover, and contain with percentages. For example: animation-range: entry 20% cover 80%; starts the animation when the element is 20% into entering the viewport and finishes when it's 80% through covering the viewport. This gives you precise control over when animations trigger.

As of 2024, scroll‑driven animations are supported in Chrome 115+, Edge 115+, and Opera 101+. Safari and Firefox are actively developing support. For production, use @supports (animation-timeline: scroll()) to provide fallbacks. This playground simulates the effect with JavaScript for cross‑browser preview while generating spec‑compliant CSS.

Yes! You can animate multiple properties (opacity, transform, filter) within a single @keyframes block, or apply separate animations with different timelines. Use animation-composition: accumulate if you need animations to build on each other rather than override.