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

It looks like this:

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

And does this:

• Spring physics
• Keyframes
• Drag
• SVG paths
• Server-side rendering
• Pose-inspired tree animations
• CSS variables
• Position transitions
• Unmount transitions

...and a whole lot more.

npm install framer-motion

import { motion } from "framer-motion"

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

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

Or checkout our examples for inspiration.

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

Motion is MIT licensed.