Refract

CSS scroll-driven animation generator

Make elements fade, slide or reveal as they scroll into view, or add a reading progress bar, using only CSS. Preview it by scrolling, then copy code that includes fallbacks for older browsers.

Free · no sign-up · copy and paste

Controls

CSS










How to use the scroll-driven animation generator


  1. Pick an effect. Fade, slide up, scale, wipe and unblur animate elements as they enter the screen. Reading progress adds a bar that fills as the reader scrolls down the page.
  2. Set when it plays. Start and finish control the animation range. The default plays the effect from the moment an element starts entering the viewport until it is 35% of the way in.
  3. Preview by scrolling. Scroll inside the preview box to watch the effect. It uses the real CSS, so it behaves exactly as it will on your site.
  4. Copy the CSS. Add the reveal class to any element you want to animate. The code includes an @supports fallback and turns the animation off for people who prefer reduced motion.


What are scroll-driven animations?
Scroll-driven animations link a normal CSS animation to scrolling instead of time. animation-timeline: view() tracks an element’s position as it moves through the viewport; animation-timeline: scroll() tracks how far a container, or the whole page, has scrolled. Effects that used to need JavaScript and an IntersectionObserver are now a few lines of CSS.
Understanding animation-range
animation-range sets which part of the scroll drives the animation. entry 0% is the moment the element’s top edge appears at the bottom of the screen; cover 35% is when it’s a little over a third of the way through its journey. Short ranges feel snappy; longer ones feel more gradual.
Browser support and fallbacks
As of October 2026 scroll-driven animations work in Chrome, Edge and Safari 26 and later; Firefox is still working on them. The generated code wraps the effect so browsers without support simply show the content normally, which makes it a safe progressive enhancement.


Frequently asked questions


Do I need JavaScript for scroll animations?
Not any more for these effects. Browsers that support animation-timeline run them entirely in CSS, often more smoothly than JavaScript because they can run off the main thread.
Why isn’t the preview animating?
Your browser may not support scroll-driven animations yet. Try the page in Chrome, Edge or Safari 26.
Is it bad for accessibility?
Movement can cause discomfort for some people, so the code disables the animation when prefers-reduced-motion is set. Keep effects subtle and never hide important content until someone scrolls.