Mastering Motion Primitives with Framer Motion

Animations are a powerful tool in a developer's arsenal. They can guide users, provide feedback, and create a delightful user experience. In the React ecosystem, Framer Motion has emerged as a go-to library for creating production-ready animations.

The Core Concept: motion Components

The heart of Framer Motion is the motion component. You can turn any HTML or SVG element into a motion component by prepending motion. to it.

import { motion } from "framer-motion";

<motion.div
  animate={{ x: 100, rotate: 90 }}
  transition={{ duration: 0.5 }}
/>

This simple example moves a div 100 pixels to the right and rotates it 90 degrees.

Variants: Reusable Animation Definitions

Writing animation properties inline can get messy. Variants allow you to define animation states and transition between them by name.

const variants = {
  hidden: { opacity: 0 },
  visible: { opacity: 1 },
};

<motion.div
  initial="hidden"
  animate="visible"
  variants={variants}
/>

This approach is cleaner and more scalable, especially for complex animations involving parent-child relationships.

AnimatePresence: Handling Enter and Exit Animations

One of the most powerful features of Framer Motion is the AnimatePresence component. It enables you to animate components when they are added to or removed from the React tree.

This is essential for things like:

• Animating list items as they are added or removed.
• Creating smooth transitions between pages or views.
• Modals and pop-ups that animate in and out.

By wrapping your conditional components in AnimatePresence, you unlock declarative and beautiful exit animations with ease.