motion
v12.38.0 MITAn animation library for JavaScript and React.
motion Download Trends
About motion
Motion is a powerful animation library designed to bring dynamic visual experiences to JavaScript and React applications. It addresses the complexity inherent in creating smooth, engaging animations by providing a declarative API and a physics-based animation engine. This allows developers to craft complex sequences and interactive effects with greater ease and control, moving beyond simple CSS transitions.
The core philosophy of Motion centers on developer experience and expressive animation capabilities. It targets developers building modern UIs who require more than basic animations, offering a flexible system that can handle everything from subtle micro-interactions to elaborate full-screen transitions. The library aims to make sophisticated animation accessible without requiring deep expertise in animation principles or complex timeline manipulation.
Key to Motion's API are its imperative animation controls and declarative component-based approach, especially leveraging hooks like `useMotionValue` and `useTransform`. It also features `motion.div`, `motion.span`, etc., for direct DOM manipulation within React. The library integrates a powerful spring physics engine, enabling realistic motion and easing curves that feel natural and responsive.
Motion integrates seamlessly into the React ecosystem, particularly with applications built using React 18 and its concurrent features. It plays well with common build tools and development workflows. Its compatibility extends to server-side rendering (SSR) and static site generation (SSG) environments, allowing animations to be defined or pre-rendered where appropriate.
With 7.1M weekly downloads and 31.2K GitHub stars, Motion is a mature and widely adopted library. Its unpacked size is 615.4 kB, with a gzipped bundle size of 45.0 kB, representing a reasonable trade-off for its feature set. The project is actively maintained, with the last update in March 2026, ensuring ongoing support and improvements.
While Motion is highly capable, developers should be aware of its feature richness potentially introducing a larger learning curve compared to simpler CSS-only animation solutions. For extremely simple, one-off transitions that don't require complex physics or interactivity, a direct CSS approach might be more lightweight.
When to use
- When creating interactive UI elements with physics-based animations using `useSpring` or `useFrame`.
- When animating React components with declarative syntax via `motion.div` and related components.
- When needing to coordinate complex animation sequences with `useAnimation` or sequence composers.
- When implementing gestures and drag interactions with `useDrag`.
- When targeting advanced visual effects that benefit from programmatic control and easing functions.
- When integrating animations with React hooks and state management patterns.
When NOT to use
- If only simple, non-interactive CSS transitions are needed — consider direct CSS animations or transitions for a lighter solution.
- If the project aims for minimal JavaScript bundle size and animations are purely decorative — a CSS-only approach might be more suitable.
- When building a simple static site with no dynamic UI requirements — the overhead of a full animation library may not be justified.
- If specific, non-physics-based easing curves not supported by Motion's engine are strictly required — explore libraries that offer custom easing functions.
- For environments where JavaScript execution is heavily restricted or disabled — CSS-based animations would be a more robust choice.