React Animations — Framer Motion & CSS Transitions

CSS Transitions in React

function Toggle({ isOn }) {
  return (
    <div
      className={`toggle ${isOn ? 'on' : 'off'}`}
      style={{
        transition: 'transform 0.3s ease',
        transform: isOn ? 'translateX(20px)' : 'translateX(0)'
      }}
    >
      {isOn ? 'ON' : 'OFF'}
    </div>
  );
}

Framer Motion Basics

import { motion } from 'framer-motion';

function FadeIn({ children }) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.5, ease: 'easeOut' }}
    >
      {children}
    </motion.div>
  );
}

Hover and Tap Animations

function AnimatedCard() {
  return (
    <motion.div
      whileHover={{ scale: 1.05, boxShadow: '0 10px 30px rgba(0,0,0,0.2)' }}
      whileTap={{ scale: 0.95 }}
      transition={{ type: 'spring', stiffness: 300 }}
      className="card"
    >
      <h3>Hover me!</h3>
    </motion.div>
  );
}

Page Transitions

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

function PageTransition({ children, routeKey }) {
  return (
    <AnimatePresence mode="wait">
      <motion.div
        key={routeKey}
        initial={{ opacity: 0, x: -20 }}
        animate={{ opacity: 1, x: 0 }}
        exit={{ opacity: 0, x: 20 }}
        transition={{ duration: 0.3 }}
      >
        {children}
      </motion.div>
    </AnimatePresence>
  );
}

Staggered 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 }
};

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