Framer Motion

Production-ready motion library for React

animation

Simple declarative syntax for complex animations and gestures.

ReactAnimationGesturesLayout

🎮 Playground

import { motion } from "framer-motion"

export default function Demo() {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 0.5 }}
    >
      Hello World
    </motion.div>
  )
}

Open Sandbox

Use cases

•Page transitions
•Micro-interactions
•Layout animations

Good for

✓Modern web apps
✓Interactive UIs
✓Landing pages

Not good for

✗Bundle size sensitive projects
✗Server-side rendering heavy apps

Installation

$ npm install framer-motion

Example

import { motion } from "framer-motion"

export default function Demo() {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 0.5 }}
    >
      Hello World
    </motion.div>
  )
}

Comparison

"More intuitive API than React Spring, more features than CSS animations."

Trust Metrics

24.5K

GitHub Stars

5.8M

Weekly Downloads

Last Commit:last year

Used by

FramerStripeNetflix

View on GitHub View on npm