Motion
2.6-18kbA modern animation library with spring physics, gestures, and scroll-linked effects.
See It in Action
Spring physics and gestures that CSS simply cannot replicate.
Drag the sliders to change spring stiffness and damping in real time. CSS easing curves cannot produce this physics-based motion.
What is Motion?
Motion (formerly Framer Motion) is an animation library for JavaScript, React, and Vue. It lets you add spring-based animations, gesture responses, scroll-linked effects, and layout transitions with very little code.
The library comes in two sizes. The mini version (motion/mini, 2.6kb) uses the browser's native Web Animations API for basic animations. The full version (motion, 18kb) adds spring physics, timelines, independent transforms, and more. Both are fully tree-shakeable — you only ship what you import.
Motion is MIT licensed and free for any project, including commercial ones.
When to Use Motion
How Motion Compares
GSAP (now owned by Webflow) excels at complex timeline choreography and has a rich plugin ecosystem. Motion offers a simpler declarative API, real spring physics, and gesture support. GSAP is free but closed-source with usage restrictions; Motion is MIT licensed.
Anime.js v4 added spring physics, narrowing the gap for vanilla JS work. Motion still wins on gestures, automatic layout animations, and deep React/Vue integration.
CSS handles simple transitions well. Motion is needed when you want spring physics, gesture-driven animations, layout transitions, or JS-controlled dynamic values.
Get Started with Motion
npm install motionyarn add motion<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/motion.js"></script>// CDN: after <script src="...motion.js"></script>
const { animate, stagger, inView } = Motion;
// npm: import { animate, stagger, inView } from "motion";
// Spring animation (CSS cannot do this)
animate(".box", { scale: 1.2, rotate: 10 }, {
type: "spring", stiffness: 300, damping: 15
});
// Stagger multiple elements with spring
animate(".card", { opacity: 1, y: 0 }, {
delay: stagger(0.1),
type: "spring", bounce: 0.3
});
// Trigger animation on scroll
inView(".section", (el) => {
animate(el, { opacity: 1, y: 0 }, { type: "spring" });
});