Built-in toolFree · No signup

CSS Scroll-Driven Animations Generator

Build reveal-on-scroll effects and scroll-progress bars using native CSS animation-timeline — no JavaScript, no scroll event listeners. Scroll the live demo panel to see the animation actually run, then copy the CSS.

Share on X LinkedIn

Timeline Source

Live Preview — scroll inside the box

scroll down ↓

Item 1

Item 2

Item 3

end of demo

Reveal preset

animation-range endcover 45%

Lower values finish the reveal quickly, right as the item enters view. Higher values stretch it out over more scroll distance.

CSS Output

@keyframes reveal-fade-up {  from { opacity: 0; translate: 0 32px; }  to   { opacity: 1; translate: 0 0; }} .reveal-item {  animation: reveal-fade-up linear both;  animation-timeline: view();  animation-range: entry 0% cover 45%;}

Was this tool helpful?

How to use

Pick a timeline source

view() animates an element as it enters/exits the viewport. scroll() tracks scroll progress of a scroller directly, e.g. for a progress bar.

Choose a preset

For view(), pick a reveal style: fade up, fade in, scale in, or slide from left.

Scroll the demo

Scroll inside the live preview panel to watch the exact animation play in real time.

Copy the CSS

Copy the @keyframes plus the animation-timeline and animation-range declarations into your stylesheet.