What's the difference between scroll() and view() timelines?

scroll() ties an animation's progress to how far a scrollable element has scrolled (0% at the top, 100% at the bottom) — ideal for a reading-progress bar. view() instead ties progress to how far an element has traveled through its scroller's visible viewport — ideal for triggering an effect as a section enters and leaves view.

What does animation-range: entry 0% cover 45% mean?

It scopes the view() timeline's 0%–100% progress to a sub-range of the element's visibility: entry 0% is the moment the element starts entering the viewport, and cover 45% is the point where it's 45% of the way through being fully covered by (scrolled past) the viewport — so the animation plays out entirely within that window instead of across the whole visible duration.

Why doesn't the preview animate in my browser?

animation-timeline, scroll(), and view() are a newer CSS feature currently supported in Chromium-based browsers (Chrome/Edge 115+) and shipping in others — if your browser doesn't support it yet, the elements will simply sit at their animation's 'from' state instead of animating, with no error.

Do I need a fallback for unsupported browsers?

Browsers that don't recognize animation-timeline just ignore it, so the element stays at whichever keyframe state its base animation or initial styles put it in — wrap the rule in @supports (animation-timeline: view()) if you want to provide a different fallback (e.g. a plain fade-in on load) for everyone else.

Does this tool store or upload anything?

No — every setting is applied and rendered locally in your browser. Nothing is sent to a server.

CSS SCROLL-DRIVEN ANIMATION GENERATOR

Build a scroll(), view()-powered reveal or progress bar and copy the CSS.

Section 1

Section 2

Section 3

Section 4

Scroll inside the box above to preview. Requires a browser with scroll-driven animation support (Chrome/Edge 115+).

Effect

Range start (entry): 0%Range end (cover): 45%

Block color

.reveal {
  animation: reveal-fade-up auto linear both;
  animation-timeline: view();
  animation-range: entry 0% cover 45%;
}

@keyframes reveal-fade-up {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

How to use scroll-driven animation

1
Choose a mode: a reveal-on-scroll effect (view()) or a scroll-linked progress bar (scroll()).
2
For reveal, pick an effect and tune the animation-range start/end.
3
For the progress bar, pick a block and bar color.
4
Scroll inside the live preview box to see the animation tied to scroll position.
5
Copy the CSS and HTML — no JavaScript or scroll event listeners needed.

Questions

What's the difference between scroll() and view() timelines?: scroll() ties an animation's progress to how far a scrollable element has scrolled (0% at the top, 100% at the bottom) — ideal for a reading-progress bar. view() instead ties progress to how far an element has traveled through its scroller's visible viewport — ideal for triggering an effect as a section enters and leaves view.
What does animation-range: entry 0% cover 45% mean?: It scopes the view() timeline's 0%–100% progress to a sub-range of the element's visibility: entry 0% is the moment the element starts entering the viewport, and cover 45% is the point where it's 45% of the way through being fully covered by (scrolled past) the viewport — so the animation plays out entirely within that window instead of across the whole visible duration.
Why doesn't the preview animate in my browser?: animation-timeline, scroll(), and view() are a newer CSS feature currently supported in Chromium-based browsers (Chrome/Edge 115+) and shipping in others — if your browser doesn't support it yet, the elements will simply sit at their animation's 'from' state instead of animating, with no error.
Do I need a fallback for unsupported browsers?: Browsers that don't recognize animation-timeline just ignore it, so the element stays at whichever keyframe state its base animation or initial styles put it in — wrap the rule in @supports (animation-timeline: view()) if you want to provide a different fallback (e.g. a plain fade-in on load) for everyone else.
Does this tool store or upload anything?: No — every setting is applied and rendered locally in your browser. Nothing is sent to a server.