Motion.dev

Motion (previously Framer Motion) is a fast, production-grade web animation library for React, JavaScript and Vue. Build smooth UI animations with examples, tutorials, and a tiny footprint.

Animations that move

Create high-performance web animations with Motion’s easy-to-use API — from simple transforms to advanced interactive gestures.

• Simple API: Motion’s pick-up-and-play API is easy to start and fun to master.
• Independent transforms: Animate x, y, rotateZ etc independently, without wrapper elements.
• Exit animation: Motion's AnimatePresencemakes it easy to animate elements as they exit.
• Scroll animation: Smooth, hardware-accelerated scroll animations.
• Gestures: Hover, press and drag gestures that feel native, not “webby”.
• Timeline sequences: Variants, stagger and timelines make it easy to precisely orchestrate animations.
• Layout animation: Animate between different layouts with Motion’s industry-leading layout animation engine.
• Spring physics: Real spring physics for great-feeling animations.

Next-level animation APIs

Build previously complex effects, like magnetic cursors or infinite scrolling tickers, with Motion+ components. These next-level Motion APIs are built for maximum performance and customisation.

Production-ready animations

Unlock a vault of 330+ pre-built animations for JavaScript, React and Vue to copy & paste directly into your own project.

Plus, an ever-growing library of 100+ step-by-step tutorials written by the creator of Motion will teach you the official best practices and core principles behind each effect.

Your complete animation workflow

Building beautiful, performant animations is hard. You can waste hours tweaking curves, fighting AI with outdated information, or not knowing where to find help.

Motion+ provides the ultimate professional toolkit, empowering you to design with immediate feedback, code with AI-driven confidence, and collaborate with a vibrant community of 1000+ Motion experts.