Motion
motion.dev- Category
- Developer Tools
- Rank
- No. 142Tools index
- Pricing
- Open Source
- Platform
- web
- Type
- TOOL
- Builder
- @motiondivision
- GitHub
- 33.6k stars
- Date
About
Motion is a production-grade animation library for React, JavaScript, and Vue that makes it easy to create smooth, high-performance web animations. It features a simple API, hardware-accelerated animations, gesture support, and advanced capabilities like layout animations and scroll effects.
What it does
Motion supplies animation building blocks for browser interfaces across React, plain JavaScript, and Vue. It covers component animation, gestures, springs, timelines, layout changes, scrolling, reactive values, and view transitions through framework-specific packages.
Why it's ranked here
The repository supports serious interface work, not just basic transitions. Its hybrid engine combines JavaScript with native browser animation APIs, while the package surface includes accessibility support, layout projection, gestures, scrolling, and extensive automated testing.
What's good
React users can select smaller feature bundles, and development checks warn when imports defeat tree shaking. The engine tracks value velocity, stops animations after listeners disappear, supports reduced-motion preferences, and can attach animations to native scroll timelines.
Tradeoffs
The breadth creates a large public surface with deprecated compatibility exports alongside newer APIs. React, JavaScript, and Vue use different packages or import routes. Some learning material, premium APIs, editor tools, AI skills, and community access require Motion+.
How to use it well
Choose Motion for browser products needing coordinated component, gesture, layout, scroll, or view-transition animation. React teams can select feature bundles and smaller component imports to preserve tree shaking. It does not replace visual design tools, and some advanced resources belong to the paid membership.
Technical notes+
The root package.json defines a private Yarn 3 workspace monorepo using Turbo, TypeScript 5.4.3, Rollup, Jest, Cypress, and Playwright. packages/motion/src/index.ts re-exports framer-motion/dom, while packages/motion-dom/src/index.ts exposes the lower-level animation, projection, gesture, value, scroll, resize, view-transition, and rendering layers. packages/framer-motion/src/index.ts publishes React components, hooks, reduced-motion helpers, feature bundles, and deprecated compatibility exports. packages/framer-motion/src/motion/index.tsx selects HTML or SVG state, creates visual elements outside React rendering, and warns when a full motion component inside LazyMotion defeats tree shaking. The Makefile provides separate React, React 19, HTML, Next.js, Jest, Cypress, and Playwright test paths.
Observed
- License
- MIT
- Primary language
- TypeScript
- Interface
- Browser animation libraries for React, JavaScript, and Vue
- Installation
- React and JavaScript use the motion npm package; Vue uses motion-v
- Packaging
- Private Yarn 3 workspace monorepo covering packages and development workspaces
- Build system
- Turbo orchestrates workspace builds; Rollup is included for package bundling
- Test surface
- Jest, Cypress, and Playwright cover unit and browser workflows
- Platform scope
- HTML, SVG, React components, browser-native animation APIs, scroll timelines, and view transitions
Read from README.md, Makefile, package.json, packages/motion/src/index.ts, packages/motion-dom/src/index.ts, packages/motion-utils/src/index.ts, packages/framer-motion/src/index.ts, packages/motion-dom/src/view/index.ts, packages/motion-dom/src/stats/index.ts, packages/motion-dom/src/value/index.ts, packages/motion-dom/src/resize/index.ts, packages/motion-dom/src/frameloop/index.ts, packages/framer-motion/src/motion/index.tsx, packages/framer-motion/cypress/plugins/index.js, packages/framer-motion/cypress/support/index.js.
What it can do
Create smooth web animations
React, JavaScript, or Vue components with animation parameters → Hardware-accelerated animated web elements
Implement gesture-based interactions
Touch or mouse gesture events and component definitions → Interactive animated responses to user gestures
Generate layout animations
Component layout changes and transition specifications → Smooth animated transitions between different layouts
Create scroll-triggered effects
Scroll position data and animation triggers → Animations that respond to page scrolling
Optimize animation performance
Animation definitions and browser capabilities → Hardware-accelerated animations with improved performance
Intel on Motion
Tags
Tech Stack
Media
Comments (0)
No comments yet
Editorially curated, with community endorsements as a secondary signal. Corrections welcome.