Framer Motion.

Complete documentation of the Framer Motion animation library. A production-ready motion library for React.

Production-ready declarative animations.

A simple declarative syntax means you write less code. Less code means your codebase is easier to read and maintain.

<motion.div
  animate={{
    x: 0,
    y: 0,
    scale: 1,
    rotate: 0,
  }}
/>

Animations that work like magic.

When animating between two separate components, Framer Motion will take care of everything in between.

const [selectedId, setSelectedId] = useState(null)
 
{items.map(item => (
  <motion.div layoutId={item.id} onClick={() => setSelectedId(item.id)}>
    <motion.h5>{item.subtitle}</motion.h5>
    <motion.h2>{item.title}</motion.h2>
  </motion.div>
))}

<AnimatePresence>
  {selectedId && (
    <motion.div layoutId={selectedId}>
      <motion.h5>{item.subtitle}</motion.h5>
      <motion.h2>{item.title}</motion.h2>
      <motion.button onClick={() => setSelectedId(null)} />
    </motion.div>
  )}
</AnimatePresence>

Complex events and gestures.

Framer Motion offers more advanced listeners and also extends the basic set of React event listeners.