framer-motion

An open source motion library for React, made by Framer.

Motion powers Framer, the web builder for creative pros. Design and ship your dream site. Zero code, maximum speed.

<img src="https://framerusercontent.com/images/atXqxn4JhKm4LXVncdNjkKV7yCU.png" width="140" alt="Start for free" />

<img src="https://framerusercontent.com/images/pMSOmGP2V8sSaZRV2D7i4HTBTe4.png" width="1000" alt="Framer Banner" />

<img src="https://img.shields.io/npm/v/framer-motion.svg?style=flat-square" />

---

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)
• Scroll animations
• SVG paths
• Exit animations
• Server-side rendering
• Hardware-accelerated animations
• Orchestrate animations across components
• CSS variables

...and a whole lot more.

Get started

🐇 Quick start

Install framer-motion with via your package manager:

npm install framer-motion

Then import the motion component:

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 see our examples for inspiration.

💎 Contribute

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

👩🏻‍⚖️ License

• Framer Motion is MIT licensed.

✨ Framer

• Design and publish sites that inspire. Try Framer for free.