framer-motion

Framer Motion

An open source and production-ready motion
library for React on the web.

Framer Motion is an open source, production-ready library that's designed for all creative developers.

It looks like this:

<motion.div animate={{ x: 0 }} />

It does all this:

• Springs
• Keyframes
• Layout animations
• Shared layout animations
• Gestures (drag/tap/hover)
• SVG paths
• Exit animations
• Server-side rendering
• Orchestrate animations across components
• CSS variables

...and a whole lot more.

Get started

🐇 Quick start

npm install framer-motion

import { motion } from "framer-motion"

export const MyComponent = ({ isVisible }) => (
    <motion.div animate={{ opacity: isVisible ? 1 : 0 }} />
)

📚 Docs

Check out our documentation for guides and a full API reference.

Or checkout our examples for inspiration.

🛠 Contribute

Want to contribute to Framer Motion? Our contributing guide has you covered.

👩🏻‍⚖️ License

Framer Motion is MIT licensed.

Framer

Get on the same page as your designers before production. Get started with design and prototyping in Framer.

Similar packages

Other packages similar to framer-motion

react-spring

React-spring is a spring-physics based animation library that allows for a wide range of animations in React applications. It is similar to framer-motion in that it provides a way to create animations, but it uses spring physics for a more natural motion. React-spring is more focused on physics-based animations, whereas framer-motion offers a wider range of animation utilities, including gesture handling and drag.

react-motion

React-motion is another animation library for React that provides a powerful way to create animations using spring configurations. It is less declarative and more configuration-based compared to framer-motion, which might be preferred by developers who want more control over the animation physics.

gsap

GSAP (GreenSock Animation Platform) is a robust JavaScript animation library that works well with React and other frameworks. It is not specifically designed for React like framer-motion, but it offers a wide range of animation capabilities and fine-grained control over animations. GSAP is known for its performance and flexibility, but it has a steeper learning curve compared to framer-motion.

animejs

Anime.js is a lightweight JavaScript animation library that can be used with any web framework, including React. It is similar to framer-motion in terms of providing a simple API for animations, but it does not offer React-specific features like framer-motion does. Anime.js is a good choice for developers looking for a general-purpose animation library that is easy to use and extend.