Framer Motion Has a Free API That Makes React Animations Effortless

#react #webdev #animation #javascript

Framer Motion (now Motion) is React's most powerful animation library. Its API surface goes far beyond simple animate props.

Layout Animations: Zero-Config Magic

import { motion } from "framer-motion";

function ExpandableCard({ isOpen }) {
  return (
    <motion.div layout>
      <motion.h2 layout="position">Card Title</motion.h2>
      {isOpen && (
        <motion.p
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
        >
          Expanded content here
        </motion.p>
      )}
    </motion.div>
  );
}

Just add layout — Motion automatically animates between any layout change. Size, position, flexbox reflows — all smooth.

Gesture API: Drag, Hover, Tap

<motion.div
  drag
  dragConstraints={{ left: -100, right: 100, top: -50, bottom: 50 }}
  dragElastic={0.2}
  whileHover={{ scale: 1.05 }}
  whileTap={{ scale: 0.95 }}
  whileDrag={{ cursor: "grabbing" }}
  onDragEnd={(event, info) => {
    if (info.offset.x > 100) dismissCard();
  }}
/>

Scroll-Linked Animations

import { motion, useScroll, useTransform } from "framer-motion";

function ParallaxHero() {
  const { scrollYProgress } = useScroll();
  const y = useTransform(scrollYProgress, [0, 1], [0, -300]);
  const opacity = useTransform(scrollYProgress, [0, 0.5], [1, 0]);

  return (
    <motion.div style={{ y, opacity }}>
      <h1>Scroll to reveal</h1>
    </motion.div>
  );
}

AnimatePresence: Exit Animations

import { AnimatePresence, motion } from "framer-motion";

function NotificationList({ notifications }) {
  return (
    <AnimatePresence mode="popLayout">
      {notifications.map((n) => (
        <motion.div
          key={n.id}
          initial={{ opacity: 0, x: 300 }}
          animate={{ opacity: 1, x: 0 }}
          exit={{ opacity: 0, x: -300 }}
          layout
        >
          {n.message}
        </motion.div>
      ))}
    </AnimatePresence>
  );
}

Variants: Orchestrated Animations

const container = {
  hidden: { opacity: 0 },
  show: {
    opacity: 1,
    transition: { staggerChildren: 0.1 }
  }
};

const item = {
  hidden: { opacity: 0, y: 20 },
  show: { opacity: 1, y: 0 }
};

<motion.ul variants={container} initial="hidden" animate="show">
  {items.map((i) => (
    <motion.li key={i} variants={item}>{i}</motion.li>
  ))}
</motion.ul>

useMotionValue + useSpring: Reactive Physics

import { useMotionValue, useSpring } from "framer-motion";

const x = useMotionValue(0);
const springX = useSpring(x, { stiffness: 300, damping: 30 });

// Track cursor
onMouseMove={(e) => x.set(e.clientX)}