Development · Website
Motion
Open-source animation library for React, Vue, and vanilla JavaScript
Motion (formerly Framer Motion) is a lightweight web animation library that provides declarative syntax, gesture controls, and layout transitions. It combines hardware-accelerated browser APIs with a JavaScript engine to produce smooth UI interactions at a small bundle size. Developers can use it directly via framework components or plain JavaScript, supported by prebuilt UI templates and AI developer tooling.
What it's for
- Animate complex UI layout transitions with a single prop
- Add gesture interactions like dragging, hovering, and pressing to web elements
- Trigger scroll-linked animations using hardware-accelerated browser APIs
- Orchestrate multi-step animation sequences and exit transitions for DOM elements
Features
- Support for React, Vue, and vanilla JavaScript
- Independent transform properties without wrapper elements
- Hardware-accelerated scroll animations via ScrollTimeline
- Built-in native gestures including hover, press, and drag
- Automatic layout animations using the layout prop
- Spring physics engine for realistic motion response
- AnimatePresence component for handling DOM exit animations
- Motion Studio visual editor and AI agent tools (AI Kit)
Pricing
Freemium. Core library is free and open source (MIT); Motion+ offers paid add-on tools, examples, and UI kits.
Details
- Type
- Website
- Category
- Development
- Topic
- UI Components
- Open source
- Yes
- Platforms
- Code library, Web
- For
- Frontend web developers and UI designers
- Alternative to
- GSAP, Anime.js
- Tags
- animation, javascript, react, vue, frontend, ui
Why it was saved
- @kalypsodesigns: Enables declarative animations, gesture handling, and layout transitions across modern frontend frameworks.
- @frontendjoe: Allows developers to power simple to complex React UI animations declaratively using motion components and straightforward animate properties.
- @jeetnirnejak: Named in the tweet as the animation tool used.
- @voidyaps: The go-to animation engine for the kind of micro-interactions the list celebrates; hybrid engine with JS and hardware-accelerated browser APIs; agent-compatible docs/API.
Compare
Related
Copy-paste React UI components built with Tailwind CSS and Radix primitives.
Pre-built, responsive shadcn/ui blocks and layouts for React applications
Open-source animated and interactive React UI components and backgrounds
Curated directory of crafted React, Tailwind, and shadcn UI components.
Open-source animated React icons built with Lucide and Motion
Animated React and Tailwind UI components designed for landing pages
Updated