Motion
Editor's PickThe animation library for the web (formerly Framer Motion) — springs, gestures, layout and scroll animations for React, JavaScript and Vue in one tiny, MIT-licensed package.
Try it now
GPT-4oWhat is Motion?
Motion, formerly known as Framer Motion, is the industry-standard open-source animation and gesture library for the web, maintained by Motion Division and trusted in production by Framer and Figma across hundreds of thousands of sites. It uses a declarative API and a hybrid engine that combines JavaScript with hardware-accelerated browser APIs for smooth, up-to-120fps animations while keeping a tiny footprint (many APIs are up to 90% smaller than their GSAP equivalents). Beyond simple tweens it ships real spring physics, hover/tap/pan/drag gestures, industry-leading layout and shared-layout transitions, scroll-linked and scroll-triggered effects, timelines, exit animations and full transforms on every axis. It is TypeScript-first, tree-shakable, SSR-ready and covered by an extensive test suite, with first-class React support plus vanilla JavaScript and Vue bindings and 300+ official examples. It is also built for the AI era, shipping agent-compatible documentation, skills and an API so AI coding tools can drop in correct snippets directly.
Pros
- The de-facto standard React animation library, trusted by Framer and Figma at very large scale.
- One dependency covers springs, gestures, layout transitions and scroll effects that otherwise need several packages.
- Tiny, tree-shakable and TypeScript-first, with SSR support and strong docs and examples.
- Free and open source under MIT, with React, vanilla JS and Vue support from one team.
- Excellent fit for vibe coding: copy-paste snippets run correctly inside AI coding assistants.
Cons
- The deepest capabilities are React-centric; the vanilla JS and Vue APIs are narrower.
- Advanced spring choreography and layout animations still have a learning curve.
- Continuous heavy animation can cost CPU and battery on low-end mobile devices.
- Some higher-end timeline and visual tooling is reserved for the paid Motion Plus plan.
Capabilities
Compare with Alternatives
| Feature | Motion | React Bits | Jiro | PropertySurvey Pro |
|---|---|---|---|---|
| Rating | 4.8 | 4.8 | 4.6 | 4.8 |
| Pricing | Freemium | Freemium | Freemium | Freemium |
| Starting From | — | Free | — | Free / Paid |
| API | — | — | — | — |
| Free Tier | — | — | — | — |
| Mobile App | — | — | — | — |
Who is it for
Frontend engineer
Add micro-interactions, hover states and element transitions to a React or Next.js product.
Indie hacker / founder
Make sites generated by v0, Lovable, Cursor or Bolt feel premium with springs and drag gestures.
Design engineer
Build scroll-driven landing pages and shared-layout animations with minimal code.
Component library author
Ship animated, accessible, SSR-compatible primitives with full TypeScript types.
Prototyper
Try interaction ideas fast by remixing the 300+ official examples.