What is a CSS scroll-driven animation?

A CSS scroll-driven animation links an animation's progress to the scroll position of a container or the page. Using animation-timeline: scroll(), the animation plays forward as you scroll down and reverses as you scroll up — no JavaScript required.

What does animation-range do?

animation-range controls which portion of the scroll progress triggers the animation. For example, animation-range: cover 20% cover 80% means the animation starts when the element is 20% into the viewport and finishes when it's 80% through. Keywords include cover, contain, entry, and exit.

Do scroll-driven animations work in all browsers?

Scroll-driven animations (animation-timeline: scroll() and view()) are supported in Chrome 115+, Edge 115+, and Opera. Firefox support is available behind a flag. For Safari and older browsers, consider a JavaScript fallback or use @supports to progressively enhance.

What is the difference between scroll() and view() timeline?

scroll() links the animation to the scroll progress of a scroll container (how far the page or a div has been scrolled). view() links it to the element's position inside the viewport — ideal for entrance animations when an element scrolls into view. This tool uses scroll() for precise scroll-position control.

Can I animate multiple properties at once?

Yes! CSS @keyframes can animate multiple properties simultaneously. In this builder, choose one property to prototype quickly. For multiple properties, combine the generated @keyframes — add extra property declarations inside the from {} and to {} blocks.

Does this require JavaScript?

No. The generated CSS is 100% pure CSS. animation-timeline: scroll() is a native CSS feature and requires no JavaScript at runtime.

CSS Scroll-Driven Animations

Build Scroll Animations
Without the Guesswork

Visually configure animation-timeline: scroll(), set animation-range start/end, choose your easing — and instantly copy the CSS. No JavaScript needed.

🎢

Live Scroll Preview

See your animation play in real time as you scroll inside the preview panel.

🎯

animation-range Controls

Fine-tune when the animation starts and ends using cover, contain, entry, and exit keywords.

📋

Copy-Ready CSS

Get clean, production-ready CSS with @keyframes and animation shorthand — one click to copy.

Animation Settings

Animation name

Animated property

from

animation-range start

20%

animation-range end

80%

Easing function

Scroll axis

Live Preview

Scroll inside the box ↓

↓ scroll to see animation ↓

✨

Animated Element

↑ scroll up to reverse ↑

Requires Chrome 115+ / Edge 115+ for scroll-driven animations

Generated CSS

@keyframes scroll-anim {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.animated-element {
  animation: scroll-anim linear both;
  animation-timeline: scroll(y);
  animation-range: cover 20% cover 80%;
}

Tip: Add will-change: transform or will-change: opacity on the animated element for smoother performance on composited layers.

Frequently Asked Questions

Everything you need to know about Scroll-Driven Animation Builder.

Build Scroll AnimationsWithout the Guesswork