Animation Systems: CSS, WAAPI, and Scroll-Driven

Three Ways to Animate on the Web

The web has three animation systems, each with different strengths:

1. CSS Animations and Transitions — declarative, simple, GPU-optimized
2. Web Animations API (WAAPI) — JavaScript control over CSS animations, full playback API
3. Scroll-driven Animations — animations linked to scroll position instead of time

Most developers learn CSS animations, reach for a JS library when they need control, and never learn WAAPI or scroll-driven animations. That's a mistake. WAAPI gives you programmatic control without sacrificing GPU performance. Scroll-driven animations eliminate scroll event listeners entirely. Together, they cover every animation need without a third-party library.

CSS Animations: The Foundation

Transitions

Transitions animate between two states:

.card {
  transform: scale(1);
  opacity: 1;
  transition: transform 200ms ease-out, opacity 200ms ease-out;
}

.card:hover {
  transform: scale(1.02);
  opacity: 0.95;
}

Keyframe Animations

Keyframes define multi-step animations:

@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.element {
  animation: fadeSlideIn 300ms ease-out forwards;
}

The Performance Rule

Not all CSS properties animate equally. Some trigger layout recalculation (expensive), some trigger paint (moderate), and some run entirely on the compositor thread (free):

will-change: Use With Caution

.animated-element {
  will-change: transform;
}

will-change tells the browser to prepare for an animation — typically by promoting the element to its own compositor layer. This uses GPU memory. Apply it only to elements that will actually animate, and remove it when the animation is done.

Web Animations API (WAAPI)

WAAPI exposes CSS animation capabilities through JavaScript, giving you programmatic control:

const animation = element.animate(
  [
    { transform: 'translateX(0)', opacity: 1 },
    { transform: 'translateX(300px)', opacity: 0 },
  ],
  {
    duration: 500,
    easing: 'ease-in-out',
    fill: 'forwards',
  }
);

This creates the same animation as @keyframes + CSS, but you get back an Animation object with full playback control.

Playback Control

animation.pause();
animation.play();
animation.reverse();
animation.cancel();
animation.finish();

animation.playbackRate = 2;
animation.playbackRate = -1;

animation.currentTime = 250;

await animation.finished;
console.log('Animation complete');

animation.finished is a Promise that resolves when the animation completes — no more animationend event listeners.

Composite Modes

When multiple animations target the same property, composite modes determine how they combine:

element.animate(
  [{ transform: 'translateX(100px)' }],
  { duration: 1000, composite: 'add' }
);

element.animate(
  [{ transform: 'rotate(45deg)' }],
  { duration: 1000, composite: 'add' }
);

• replace (default): the animation's value replaces the underlying value
• add: values are added together (translateX + rotate)
• accumulate: like add, but for list values (multiple transforms)

Replacing Animation Libraries

Most things people use GSAP or Framer Motion for can be done with WAAPI:

async function staggerReveal(elements) {
  const animations = elements.map((el, i) =>
    el.animate(
      [
        { opacity: 0, transform: 'translateY(20px)' },
        { opacity: 1, transform: 'translateY(0)' },
      ],
      {
        duration: 400,
        delay: i * 50,
        easing: 'cubic-bezier(0.16, 1, 0.3, 1)',
        fill: 'forwards',
      }
    )
  );

  await Promise.all(animations.map((a) => a.finished));
}

Staggered reveal animation with no dependencies. 12 lines. Runs on the compositor.

Scroll-Driven Animations

Scroll-driven animations bind animation progress to scroll position instead of time. No scroll event listeners, no IntersectionObserver hacks, no JavaScript.

As of 2026, scroll-driven animations work in Chrome, Edge, Safari 26+, with Firefox support coming.

ScrollTimeline

Tracks the scroll position of a container:

@keyframes progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.progress-bar {
  animation: progress linear;
  animation-timeline: scroll();
  transform-origin: left;
}

That's a progress bar that fills as you scroll down the page. Zero JavaScript.

.parallax-bg {
  animation: parallax linear;
  animation-timeline: scroll();
}

@keyframes parallax {
  from { transform: translateY(0); }
  to { transform: translateY(-200px); }
}

Parallax effect. Zero JavaScript. Runs on the compositor.

ViewTimeline

Tracks an element's visibility in the viewport:

.fade-in {
  animation: fadeIn linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 100%;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(50px); }
  to { opacity: 1; transform: translateY(0); }
}

As the element scrolls into view, it fades in and slides up. animation-range: entry 0% entry 100% means the animation runs from when the element starts entering the viewport to when it's fully entered.

animation-range

The animation-range property controls which portion of the scroll timeline maps to the animation:

• entry — while the element enters the scrollport
• exit — while the element exits the scrollport
• contain — while the element is fully contained in the scrollport
• cover — from first entry to last exit

.reveal {
  animation: reveal linear both;
  animation-timeline: view();
  animation-range: entry 10% cover 30%;
}

JavaScript API

WAAPI supports scroll timelines too:

const scrollTimeline = new ScrollTimeline({
  source: document.scrollingElement,
  axis: 'block',
});

element.animate(
  [
    { transform: 'rotate(0deg)' },
    { transform: 'rotate(360deg)' },
  ],
  { timeline: scrollTimeline }
);

const viewTimeline = new ViewTimeline({
  subject: element,
  axis: 'block',
});

element.animate(
  [
    { opacity: 0 },
    { opacity: 1 },
  ],
  {
    timeline: viewTimeline,
    rangeStart: 'entry 0%',
    rangeEnd: 'entry 100%',
  }
);

prefers-reduced-motion: Respecting User Preferences

Some users experience motion sickness, vestibular disorders, or simply prefer less animation. The prefers-reduced-motion media query lets you respect their preference:

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Or more granularly:

.card {
  transition: transform 200ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .card {
    transition: opacity 200ms ease-out;
  }
}

In JavaScript:

const prefersReduced = matchMedia('(prefers-reduced-motion: reduce)').matches;

element.animate(keyframes, {
  duration: prefersReduced ? 0 : 500,
  easing: 'ease-out',
});

Progressive Enhancement for Scroll-Driven Animations

Since Firefox support is still pending, use feature detection:

@supports (animation-timeline: scroll()) {
  .progress-bar {
    animation: progress linear;
    animation-timeline: scroll();
  }
}

In JavaScript:

if (CSS.supports('animation-timeline', 'scroll()')) {
  // Use scroll-driven animation
} else {
  // Fall back to IntersectionObserver or scroll listener
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        entry.target.classList.add('visible');
      }
    });
  });
}

When to Use Which