Motion

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

View Demo View Github
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.

Get started

Quick start

npm install framer-motion

import { motion } from "framer-motion"

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

GitHub