framer-motion
4.8/548
framer-motion
npm i framer-motion
framer-motion

framer-motion

Open source, production-ready animation and gesture library for React

by framer

7.6.19 (see all)License:MITTypeScript:Built-In
Categories:React Animation
npm i framer-motion
Readme

Framer Motion Icon

Framer Motion

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


Chat on Discord


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

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

💎 Contribute

👩🏻‍⚖️ License

  • Framer Motion is MIT licensed.

✨ Framer