Motion One
Build hardware-accelerated animations with Motion One — the tiny (3kb) library powered by the Web Animations API. Works with vanilla JS or any framework.
This skill produces Motion One animations using the native Web Animations API for GPU-accelerated performance. It covers timeline sequencing, scroll-linked animations, spring physics, stagger, and view transitions integration. Ideal when bundle size matters but you still need Framer Motion-level expressiveness.
animation motion-one web-animations-api performance
When to use
Use when you need a tiny animation library for vanilla JS, web components, or framework-agnostic projects, or as a Framer Motion alternative when bundle size is critical.
Examples
Scroll-linked progress
Drive an animation directly from scroll position
Use Motion One scroll() to animate a progress bar based on document scroll position with spring smoothing
View Transitions for SPA
Cross-route animations with the View Transitions API
Implement View Transitions API page navigations using Motion One in a vanilla SPA, with morphing shared elements