CSS scroll-driven animation generator

Make a scroll-driven animation

/* Fade up, tied to the scroll. Markup: <div class="reveal">…</div> */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0px); }
}

/* Only where the browser has scroll timelines, and only for readers who have
   not asked for less motion; everywhere else the element is simply shown. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      animation-name: fade-up;
      animation-duration: auto;
      animation-timing-function: cubic-bezier(0.333333, 0.666667, 0.666667, 1); /* ease-out: t(2 − t) */
      animation-fill-mode: both;
      animation-timeline: view();
      animation-range: entry 0% cover 50%;
    }
  }
}

How animation-range works

A view() timeline follows one element through its scroller: 0% when its top reaches the bottom of the view, 100% when its bottom leaves the top (fig. 1). animation-range picks the stretch of that journey the animation plays over, as a named range and a percentage at each end. entry 0% cover 50% starts as the element appears and finishes as its centre reaches the centre of the view. Before the start it holds its first keyframe and after the end its last, which is what animation-fill-mode: both does.

H is the scroller’s height and h the element’s, for an element shorter than its scroller. Cover: The whole crossing, from the first pixel in to the last pixel out. A view() timeline with no range runs over cover. Entry: While it comes in. The usual range for a reveal. Contain: While all of it is in view. For an element taller than the scroller it flips: while it covers the whole view. Exit: While it goes out. Pair it with a reversed animation to fade things away.

view() and scroll()

Both are anonymous timelines: they find their scroller themselves. scroll() is a scroller’s own position, 0% at the top and 100% at the bottom; scroll(root) is the page, and scroll() on its own the nearest scrolling ancestor. view() is one element’s way through its nearest scroller, which is why the same CSS works on a page and in the generator’s box. When the element that moves is not the one crossing the screen, name a timeline instead.

/* view(): this element’s own way through its nearest scroller. */
.card {
  animation: fade-up auto linear both;
  animation-timeline: view();          /* after the shorthand, which resets it */
  animation-range: entry 0% cover 50%;
}

/* scroll(): a scroller’s position, 0% at the top, 100% at the bottom.
   root is the page; nearest, the default, is the closest scrolling ancestor. */
.progress {
  animation: grow auto linear both;
  animation-timeline: scroll(root);
}

/* A named timeline, for when the element that moves is not the one that
   crosses the screen: the section names it, its children use it. */
.section { view-timeline: --section block; }
.section .title {
  animation: fade-up auto linear both;
  animation-timeline: --section;
  animation-range: entry 0% entry 100%;
}

/* timeline-scope lifts the name to an ancestor, so elements outside the
   section can use it too. */
.page { timeline-scope: --section; }

Browser support and the fallback

Test for the feature instead of the browser: @supports (animation-timeline: view()) in CSS, CSS.supports('animation-timeline: view()') in JavaScript, the same test svg-scroll-draw makes before its native path. Where it stands in November 2026:

A browser without it skips the whole block, so the element shows as written: nothing hidden, nothing broken, just no motion. For most reveals that is the right fallback. When the motion matters, run the same animation in JavaScript only where the test fails: the generator’s fallback option writes that file, with svg-scroll-draw over the same stretch of scroll.

/* The animation, only where the browser can run it. Everywhere else
   this block is skipped and the element shows as written. */
@supports (animation-timeline: view()) {
  .reveal {
    animation: fade-up auto linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 50%;
  }
}

if (!CSS.supports('animation-timeline: view()')) {
  // No scroll timelines here: run the JavaScript version, or nothing.
}

The same CSS, from the library

scrollAnimate and scrollDraw have a native path. When the browser passes the test and the options are ones CSS can express, they write a <style> with @keyframes and a view timeline (view() for scrollAnimate, one named on the container for scrollDraw), add a class, and leave the scroll to the browser, with no JavaScript per frame. Otherwise they run their own engine, a frame loop that reads the scroll while the element is on screen, with the same curve over the same stretch of scroll.

import { scrollAnimate } from 'svg-scroll-draw';

scrollAnimate('#card', {
  props: { opacity: [0, 1], transform: ['translateY(40px)', 'translateY(0px)'] },
});

/* What it writes in a browser with view() (one line in a <style>; formatted here). */
@keyframes ssd-a-1 {
  from { opacity: 0; transform: translateY(40px) }
  to   { opacity: 1; transform: translateY(0px) }
}
.ssd-a-1 {
  animation-name: ssd-a-1;
  animation-duration: auto;
  animation-timing-function: cubic-bezier(0.333333, 0.666667, 0.666667, 1);
  animation-fill-mode: both;
  animation-timeline: view();
  animation-range: cover 0% cover 100%;
}

It takes that path only when all of these hold:

Scroll-driven animation questions

The native path in depth: zero-JS SVG scroll animations with native CSS. All of svg-scroll-draw 2.23.3: the docs, or the text animation generator for words and letters.