Hybrid Engine Delivers Native Performance Plus Advanced Features

Motion.dev combines the Web Animations API (WAAPI) for GPU-accelerated, main-thread performance on simple transforms with a JS engine for limitations like spring physics, complex sequencing, and full SVG support. It automatically delegates to WAAPI when possible, ensuring hardware acceleration without manual optimization. The library's mini animate function weighs just 2.3KB, animating HTML, CSS, SVG paths, or WebGL via one API. This setup avoids WAAPI's constraints—no springs or robust SVG—while retaining browser-native speed, making it ideal for production where pure JS would lag or WAAPI would lack expressiveness.

Independent transforms are a key win: animate x: 150 and rotate: 360 separately without bundling into a single CSS transform string, preventing conflicts and simplifying code. For a div with class box, import animate from 'motion' and call animate('.box', { x: 150, rotate: 360 })—it auto-applies bouncy spring easing on page load, moving and spinning the element fluidly.

Spring Physics as Default with Easy Tweaks

Springs are default, providing natural bounce without config, unlike WAAPI's rigid easings. Adding duration: 1000 (1 second) switches to tweening, slowing the animation but flattening the bounce—remove it to revert to springs. Explicitly set type: 'spring' for control, then tune bounce: 0.2 for sloppy overshoot or 0.9 for tight snaps. This exposes physics parameters early, letting you match brand feel without custom curves.

The API scales to gestures, scroll-linked animations, and layout shifts that 'feel like magic,' but starts simple: one function handles entry effects reliably across frameworks. Trade-off: duration opt-in loses springs, so prefer physics-first for organic motion unless timing precision demands tweens.