Scroll-Linked Animations With the Web Animations API (WAAPI) and ScrollTimeline

This article explores scroll-linked animations, a new web technology linking animation progress to scrolling. While previously achievable with CSS alone, this article focuses on the JavaScript approach using the Web Animations API (WAAPI) and the ScrollTimeline class.

We'll briefly review WAAPI, then dive into using ScrollTimeline to create scroll-driven animations. This offers a powerful alternative to CSS-only solutions, especially given current browser compatibility limitations.

WAAPI: A Quick Refresher

The WAAPI allows JavaScript control over animations. Consider a simple CSS animation: a bar transitioning from red to dark red while expanding horizontally. The WAAPI equivalent is concise and flexible:

new Animation(
  new KeyframeEffect(
    document.querySelector('.progressbar'),
    {
      backgroundColor: ['red', 'darkred'],
      transform: ['scaleX(0)', 'scaleX(1)'],
    },
    {
      duration: 2500,
      fill: 'forwards',
      easing: 'linear',
    }
  )
).play();

Or, more succinctly using Element.animate():

document.querySelector('.progressbar').animate(
  {
    backgroundColor: ['red', 'darkred'],
    transform: ['scaleX(0)', 'scaleX(1)'],
  },
  {
    duration: 2500,
    fill: 'forwards',
    easing: 'linear',
   }
);

Both examples define keyframes (animation properties) and options (duration, easing, etc.).

Integrating ScrollTimeline

To make animations scroll-dependent, we integrate ScrollTimeline. This class creates an animation timeline linked to a scroll container's progress. Key configuration options include:

• source (or scrollSource in Chromium): The scrollable element. Defaults to document.scrollingElement.
• orientation: Scroll direction (e.g., 'block' for vertical). Defaults to vertical.
• scrollOffsets: Defines progress intervals where the timeline is active.

Example:

const myScrollTimeline = new ScrollTimeline({
  source: document.scrollingElement,
  orientation: 'block',
  scrollOffsets: [
    new CSSUnitValue(0, 'percent'),
    new CSSUnitValue(100, 'percent'),
  ],
});

Attaching this to a WAAPI animation:

new Animation(
  new KeyframeEffect(
    document.querySelector('#progress'),
    { transform: ['scaleX(0)', 'scaleX(1)'], },
    { duration: 1, fill: 'forwards' }
  ),
  myScrollTimeline
).play();

Or with Element.animate():

document.querySelector("#progress").animate(
  {
    transform: ["scaleX(0)", "scaleX(1)"]
  },
  { 
    duration: 1, 
    fill: "forwards", 
    timeline: myScrollTimeline
  }
);

This makes the animation scroll-driven. Note that Chromium currently uses scrollSource.

Browser Compatibility and Polyfills

Currently, only Chromium-based browsers fully support ScrollTimeline, often requiring feature flags. The Scroll-Timeline Polyfill by Robert Flack provides broader compatibility:

import 'https://flackr.github.io/scroll-timeline/dist/scroll-timeline.js';

Advanced Usage: Element-Based Offsets

Beyond absolute offsets, scrollOffsets can use element-based offsets, animating based on an element's position within the scroll container. These offsets comprise:

1. target: The tracked element.
2. edge: The edge of the target the timeline watches (e.g., 'start', 'end').
3. threshold: Visibility percentage (0.0-1.0).

Example:

{
  target: document.querySelector('#targetEl'),
  edge: 'end',
  threshold: 0.5,
}

Multiple offset objects can be used.

CSS vs. JavaScript: A Comparison

Both CSS and JavaScript approaches achieve scroll-linked animations. CSS is preferable for simplicity and progressive enhancement, but current browser support is limited. JavaScript offers wider compatibility but requires careful consideration for users with JavaScript disabled. The choice depends on project needs and priorities. The examples provided showcase the flexibility and power of the JavaScript approach using WAAPI and ScrollTimeline.

The above is the detailed content of Scroll-Linked Animations With the Web Animations API (WAAPI) and ScrollTimeline. For more information, please follow other related articles on the PHP Chinese website!