JSPM

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:

• Spring animations
• Simple keyframes syntax
• Gestures (drag/tap/hover)
• Layout and shared layout animations
• SVG paths
• Exit animations
• Server-side rendering
• Variants for orchestrating 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 Motion? Our contributing guide has you covered.

License

Motion is MIT licensed.