AnimateyourUIwithFramerMotion

Make sure you have a React project set up — via create-react-app, Vite, or Next.js. Then in your terminal:

npm install framer-motion

Or if you use Yarn:

yarn add framer-motion

import { motion } from "framer-motion";

• motion is a special component factory from Framer Motion.
• Wrap any HTML element with motion to animate it — <motion.div>, <motion.h1>, <motion.span>, etc.
• It behaves exactly like the original element, but now accepts animation props.

<motion.div
  initial={{ opacity: 0, y: -40 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.8, ease: "easeInOut" }}
>
  <h1>Hello, world!</h1>
</motion.div>

import { motion } from "framer-motion";

function AnimatedButton({ children, stiffness = 300, damping = 15 }) {
  return (
    <motion.button
      whileHover={{ scale: 1.05, y: -2 }}
      whileTap={{ scale: 0.9, y: 1 }}
      transition={{ type: "spring", stiffness, damping }}
      className="border border-gray-300 px-4 py-2 rounded-md cursor-pointer"
    >
      {children}
    </motion.button>
  );
}

import { motion } from "framer-motion";

// Define variants outside the component —
// keeps JSX clean and avoids recreating objects on every render.
const container = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.15,  // each child waits 150ms
      delayChildren: 0.2,     // first child waits 200ms
    },
  },
};

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

function FeaturesList() {
  const features = ["Fast", "Reliable", "Easy to use", "Customizable", "Secure"];

  return (
    <motion.ul
      variants={container}
      initial="hidden"
      animate="visible"
    >
      {features.map((feature) => (
        // No initial/animate needed on children —
        // the parent propagates its state down automatically.
        <motion.li key={feature} variants={item}>
          {feature}
        </motion.li>
      ))}
    </motion.ul>
  );
}

import { motion } from "framer-motion";

function DraggableCard() {
  return (
    <motion.div
      drag
      dragConstraints={{ left: -130, right: 130, top: -40, bottom: 40 }}
      dragElastic={0.2}
      whileDrag={{ scale: 1.08, rotate: 2 }}
    >
      Drag me!
    </motion.div>
  );
}

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

function DismissableAlert() {
  const [open, setOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setOpen((o) => !o)}>
        Toggle alert
      </button>

      {/*
        AnimatePresence must wrap the conditional element.
        Without it, React removes it instantly — no exit animation.
      */}
      <AnimatePresence mode="sync">
        {open && (
          <motion.div
            key="alert"
            initial={{ opacity: 0, y: -20 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -20 }}
            transition={{ duration: 0.25 }}
          >
            This is an animated alert.
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
}

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

function StepSwitcher() {
  const [step, setStep] = useState(1);

  return (
    <div>
      <button onClick={() => setStep((s) => (s === 1 ? 2 : 1))}>
        Toggle Step
      </button>

      {/*
        mode="wait" — step1 fully exits before step2 enters.
        Each child needs a unique key so AnimatePresence knows
        which one is leaving and which one is arriving.
      */}
      <AnimatePresence mode="wait">
        {step === 1 && (
          <motion.div
            key="step1"
            initial={{ opacity: 0, y: 10 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -10 }}
            transition={{ duration: 0.3 }}
          >
            Step 1
          </motion.div>
        )}
        {step === 2 && (
          <motion.div
            key="step2"
            initial={{ opacity: 0, y: 10 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -10 }}
            transition={{ duration: 0.3 }}
          >
            Step 2
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
}

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

function CollapsibleList() {
  const [expanded, setExpanded] = useState(null);
  const items = [1, 2, 3];

  return (
    <div>
      {items.map((id) => (
        /*
          layout — when this card's height changes (content appears
          or disappears inside), Framer Motion smoothly animates
          the resize. No height animation code needed.
        */
        <motion.div
          key={id}
          layout
          onClick={() => setExpanded((prev) => (prev === id ? null : id))}
        >
          <h3>Item {id}</h3>

          {/*
            AnimatePresence handles the content fade-out.
            layout on the parent handles the card resize.
            Together they produce a smooth accordion effect.
          */}
          <AnimatePresence>
            {expanded === id && (
              <motion.p
                layout
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                exit={{ opacity: 0 }}
              >
                Expanded content here.
              </motion.p>
            )}
          </AnimatePresence>
        </motion.div>
      ))}
    </div>
  );
}

import { motion } from "framer-motion";

function LiveBadge() {
  return (
    <motion.span
      animate={{
        // Array values = keyframe sequence: start → peak → back
        scale: [1, 1.15, 1],
        boxShadow: [
          "0 0 0px rgba(124, 58, 237, 0.3)",
          "0 0 12px rgba(124, 58, 237, 0.8)",
          "0 0 0px rgba(124, 58, 237, 0.3)",
        ],
      }}
      transition={{
        duration: 1.2,       // one full pulse cycle
        repeat: Infinity,    // loop forever
        repeatType: "reverse", // play forwards then backwards
        repeatDelay: 3,      // rest 3s between each pulse
        ease: "easeInOut",
      }}
    >
      ● LIVE
    </motion.span>
  );
}