Chapter 71: Improvements to Web Animations API

Core Idea

Discover how Motion enhances the Web Animations API (WAAPI) with features like spring animations, custom easings, default value types, improved animation state persistence, and independent transform animations. Learn about Motion's hybrid engine for hardware-accelerated performance.

Key Concepts

• Springs and custom easing functions: CSS and WAAPI only support in-built easing functions like "back-in"
• Default value types: WAAPI always expects a unit type for various animatable values
• .finished Promise: As a newer part of the WAAPI spec
• Durations as seconds: In WAAPI (and a subset of other JavaScript animation libraries)
• Persisting animation state: In a typical animation library
• Find & fix animation performance issues with your agent.: MotionScore for Agents grades animations in your source code S to F and hands your agent s
• Stop animations: WAAPI's animate function returns an Animation
• Partial/inferred keyframes: In early versions of the WAAPI spec
• Interrupting animations: WAAPI has no concept of "interrupting" existing animations.

Code Examples

animate(
  "li",
  { opacity: 1 },
  { ease: mirrorEasing(Math.sin) }
)

• What it demonstrates: Core usage pattern for Improvements to Web Animations API.

Key Takeaways

1. Improvements to Web Animations API supports Springs and custom easing functions.
2. Improvements to Web Animations API supports Default value types.
3. Improvements to Web Animations API supports .finished Promise.

Connects To

• animate(): related Motion doc page.
• Animation performance guide: related Motion doc page.
• Easing functions: related Motion doc page.