motion-craft

To create performant web animations, you must use compositor-only properties like transform and opacity. This avoids layout jank and ensures smooth perceived responsiveness without harming accessibility.

Scroll-driven reveals use WAAPI with ScrollTimeline or ViewTimeline to tie animation progress directly to scroll position. This produces native, interruptible scroll-driven motion without relying on heavy scroll event listeners.

The FLIP technique animates layout changes by recording First and Last positions, inverting the transform, and playing the transition to the final state. This enables smooth, compositor-friendly layout transitions without triggering expensive browser recalculations.

Handling prefers-reduced-motion requires providing mandatory fallbacks that disable or simplify motion. Implement explicit enter and exit asymmetry with strong custom easing, and ensure all animations respect this accessibility setting.

Using ease-in for entering UI elements creates perceived sluggishness because the motion accelerates away from the user. Strong ease-out timing is required for entering components to communicate immediate responsiveness and intentional purpose.

CSS transitions are generally not interruptible, whereas WAAPI is the standard for interruptible motion. Using WAAPI ensures animations can be halted and reversed smoothly across common component patterns like drawers and page transitions.