Motion.dev: Hybrid Engine for Springy Web Animations

The Breakthrough

Motion.dev introduces a hybrid engine that delegates simple animations to the performant Web Animations API (WAAPI) while handling springs, sequencing, and SVG in JavaScript.

What Actually Worked

• Developers import the animate function from Motion and call animate(document.querySelector('.box'), { x: 150, rotate: 360 }) to move and spin a box with independent transforms and default spring easing.
• The library applies spring physics by default; setting duration: 1000 in options switches to tween easing, while { type: 'spring', bounce: 0.2 } creates sloppy bounce or { bounce: 0.9 } for extreme springiness.
• A mini version of the animate function weighs 2.3 kilobytes.
• Motion supports animating HTML, CSS, SVG paths, and WebGL via a single API in vanilla JS, React, or Vue.

Context

The Web Animations API offers GPU-accelerated performance on the main thread but lacks spring physics, complex sequencing, and full SVG support. Motion.dev addresses this with its hybrid approach, automatically using WAAPI where possible for native speed. The video demonstrates basic setup on a plain HTML page, highlighting ease for production-grade animations, and teases gestures, scroll, and layout animations.

Notable Quotes

• "Motion is all about performance without compromising on capabilities."
• "Whatever it can hand off to the WAAPI it does. So you get the native browser performance wherever possible without even having to think about it."
• "Translate X and rotate are two transform properties. And here we're animating them independently."