Motion

Overview Motion is an open-source, production-grade animation library for React, JavaScript, and Vue. It provides a hybrid animation engine that combines JavaScript-driven control with hardware-accelerated browser APIs, delivering smooth UI motion at a small file footprint. The library is trusted by companies like Framer and Figma across hundreds of thousands of sites. Motion offers a familiar declarative API for defining animations on elements, with built-in support for independent transforms, scroll-linked motion, native gestures, layout animation, spring physics, exit animations, and timeline sequences. It is MIT-licensed and completely free to use at its core, with a paid Motion+ tier that adds premium components, an AI Kit, and visual tooling. Key Benefits APIs up to 90% smaller than equivalent GSAP implementations, reducing bundle size. Independent transforms let you animate x, y, rotate, and scale on the same element without wrapper elements. Hardware-accelerated scroll-linked motion built on the ScrollTimeline API for performant scroll-driven animations. Native hover, press, and drag gestures that feel integrated rather than layered on. Real spring physics compute animations that react naturally to user input without fixed easing curves. AnimatePresence keeps elements alive in the DOM so they can animate out before removal. How It Works You install Motion via npm or import it into your React, JavaScript, or Vue project. You then add declarative animation props—such as animate , initial , whileHover , layout , or exit —directly on Motion components like motion.div . Motion automatically selects the optimal animation path, choosing between the JavaScript engine and hardware-accelerated browser APIs, while spring-based physics determines timing and trajectory for interactive responses. Use Cases React developers building component-level UI animations with minimal boilerplate and no wrapper elements. Framer designers and site creators who rely on Motion for the animations that power hundreds of thousands of Framer sites. Vue and plain JavaScript teams who want the same animation API across different framework ecosystems. Indie developers shipping production web apps who need gesture-driven interactions, scroll-linked motion, and layout transitions without adding significant bundle size. AI-assisted development teams using the AI Kit to let an agent write Motion and CSS animations based on best-practice documentation and example source code. Animation-heavy product teams (marketing sites, interactive dashboards) requiring performant marquees, animated numbers, cursor effects, and scrambled text components. Why Choose This Product Motion is best suited for developers who want a proven, MIT-licensed animation library with a tiny footprint and first-class support for React, Vue, and plain JavaScript. It is production-ready at thousands of sites, offers a hybrid engine that avoids the performance pitfalls of pure-JS libraries, and provides an optional paid tier for teams that need premium components, AI tooling, and an IDE transition editor. The library is not a full animation design tool—it is a code-level library focused on programmatic UI animation.