React Animations with Framer Motion

Framer Motion makes React animations declarative and powerful. Here's how to use it effectively.

Basic Animations#

import { motion } from 'framer-motion';

// Simple animation
function FadeIn() {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 0.5 }}
    >
      Hello World
    </motion.div>
  );
}

// Multiple properties
function SlideIn() {
  return (
    <motion.div
      initial={{ opacity: 0, x: -100 }}
      animate={{ opacity: 1, x: 0 }}
      transition={{ duration: 0.5, ease: 'easeOut' }}
    >
      Sliding content
    </motion.div>
  );
}

// Scale animation
function ScaleIn() {
  return (
    <motion.div
      initial={{ scale: 0 }}
      animate={{ scale: 1 }}
      transition={{
        type: 'spring',
        stiffness: 260,
        damping: 20,
      }}
    >
      Bouncy!
    </motion.div>
  );
}

Variants#

// Define animation states
const containerVariants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.1,
    },
  },
};

const itemVariants = {
  hidden: { opacity: 0, y: 20 },
  visible: {
    opacity: 1,
    y: 0,
    transition: {
      duration: 0.5,
    },
  },
};

function List({ items }: { items: string[] }) {
  return (
    <motion.ul
      variants={containerVariants}
      initial="hidden"
      animate="visible"
    >
      {items.map((item) => (
        <motion.li key={item} variants={itemVariants}>
          {item}
        </motion.li>
      ))}
    </motion.ul>
  );
}

// Dynamic variants
const buttonVariants = {
  idle: { scale: 1 },
  hover: { scale: 1.05 },
  tap: { scale: 0.95 },
  disabled: { opacity: 0.5 },
};

function Button({ disabled }: { disabled?: boolean }) {
  return (
    <motion.button
      variants={buttonVariants}
      initial="idle"
      whileHover={disabled ? undefined : 'hover'}
      whileTap={disabled ? undefined : 'tap'}
      animate={disabled ? 'disabled' : 'idle'}
    >
      Click me
    </motion.button>
  );
}

Gestures#

// Hover and tap
function InteractiveCard() {
  return (
    <motion.div
      whileHover={{ scale: 1.02, boxShadow: '0 10px 30px rgba(0,0,0,0.2)' }}
      whileTap={{ scale: 0.98 }}
      transition={{ type: 'spring', stiffness: 400 }}
      className="card"
    >
      Hover or tap me
    </motion.div>
  );
}

// Drag
function DraggableBox() {
  return (
    <motion.div
      drag
      dragConstraints={{ left: -100, right: 100, top: -100, bottom: 100 }}
      dragElastic={0.2}
      whileDrag={{ scale: 1.1 }}
      className="box"
    >
      Drag me
    </motion.div>
  );
}

// Drag with snap back
function SnapBack() {
  return (
    <motion.div
      drag="x"
      dragConstraints={{ left: 0, right: 0 }}
      dragElastic={0.5}
      onDragEnd={(_, info) => {
        if (Math.abs(info.offset.x) > 100) {
          // Handle swipe
          console.log(info.offset.x > 0 ? 'Swiped right' : 'Swiped left');
        }
      }}
    >
      Swipe me
    </motion.div>
  );
}

// Pan gesture
function PanGesture() {
  const [position, setPosition] = useState({ x: 0, y: 0 });

  return (
    <motion.div
      onPan={(_, info) => {
        setPosition({
          x: position.x + info.delta.x,
          y: position.y + info.delta.y,
        });
      }}
      animate={position}
    >
      Pan me
    </motion.div>
  );
}

AnimatePresence#

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

// Exit animations
function Modal({ isOpen, onClose, children }: ModalProps) {
  return (
    <AnimatePresence>
      {isOpen && (
        <>
          <motion.div
            className="overlay"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            onClick={onClose}
          />
          <motion.div
            className="modal"
            initial={{ opacity: 0, scale: 0.9, y: 20 }}
            animate={{ opacity: 1, scale: 1, y: 0 }}
            exit={{ opacity: 0, scale: 0.9, y: 20 }}
            transition={{ type: 'spring', damping: 25 }}
          >
            {children}
          </motion.div>
        </>
      )}
    </AnimatePresence>
  );
}

// List with exit animations
function AnimatedList({ items }: { items: Item[] }) {
  return (
    <ul>
      <AnimatePresence>
        {items.map((item) => (
          <motion.li
            key={item.id}
            initial={{ opacity: 0, height: 0 }}
            animate={{ opacity: 1, height: 'auto' }}
            exit={{ opacity: 0, height: 0 }}
            transition={{ duration: 0.2 }}
          >
            {item.text}
          </motion.li>
        ))}
      </AnimatePresence>
    </ul>
  );
}

// Mode: wait for exit before enter
function PageTransition({ page }: { page: string }) {
  return (
    <AnimatePresence mode="wait">
      <motion.div
        key={page}
        initial={{ opacity: 0, x: 20 }}
        animate={{ opacity: 1, x: 0 }}
        exit={{ opacity: 0, x: -20 }}
        transition={{ duration: 0.3 }}
      >
        {page === 'home' && <HomePage />}
        {page === 'about' && <AboutPage />}
      </motion.div>
    </AnimatePresence>
  );
}

Layout Animations#

// Automatic layout animation
function ExpandingCard() {
  const [isExpanded, setIsExpanded] = useState(false);

  return (
    <motion.div
      layout
      onClick={() => setIsExpanded(!isExpanded)}
      style={{
        width: isExpanded ? 300 : 150,
        height: isExpanded ? 200 : 100,
      }}
      className="card"
    >
      <motion.h2 layout>Title</motion.h2>
      {isExpanded && (
        <motion.p
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
        >
          Expanded content here
        </motion.p>
      )}
    </motion.div>
  );
}

// Shared layout animations
function SharedLayoutExample() {
  const [selectedId, setSelectedId] = useState<string | null>(null);

  return (
    <>
      <div className="grid">
        {items.map((item) => (
          <motion.div
            key={item.id}
            layoutId={item.id}
            onClick={() => setSelectedId(item.id)}
            className="card"
          >
            <motion.h2 layoutId={`title-${item.id}`}>
              {item.title}
            </motion.h2>
          </motion.div>
        ))}
      </div>

      <AnimatePresence>
        {selectedId && (
          <motion.div
            layoutId={selectedId}
            className="expanded-card"
            onClick={() => setSelectedId(null)}
          >
            <motion.h2 layoutId={`title-${selectedId}`}>
              {items.find(i => i.id === selectedId)?.title}
            </motion.h2>
            <motion.p
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
            >
              Full content here...
            </motion.p>
          </motion.div>
        )}
      </AnimatePresence>
    </>
  );
}

// Reorder list
import { Reorder } from 'framer-motion';

function ReorderList() {
  const [items, setItems] = useState([1, 2, 3, 4]);

  return (
    <Reorder.Group values={items} onReorder={setItems}>
      {items.map((item) => (
        <Reorder.Item key={item} value={item}>
          Item {item}
        </Reorder.Item>
      ))}
    </Reorder.Group>
  );
}

Scroll Animations#

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

// Scroll progress
function ScrollProgress() {
  const { scrollYProgress } = useScroll();

  return (
    <motion.div
      className="progress-bar"
      style={{ scaleX: scrollYProgress }}
    />
  );
}

// Parallax effect
function ParallaxSection() {
  const { scrollYProgress } = useScroll();
  const y = useTransform(scrollYProgress, [0, 1], [0, -200]);

  return (
    <motion.div style={{ y }}>
      Parallax content
    </motion.div>
  );
}

// Scroll-triggered animation
function ScrollTriggered() {
  const ref = useRef(null);
  const { scrollYProgress } = useScroll({
    target: ref,
    offset: ['start end', 'end start'],
  });

  const opacity = useTransform(scrollYProgress, [0, 0.5, 1], [0, 1, 0]);
  const scale = useTransform(scrollYProgress, [0, 0.5, 1], [0.8, 1, 0.8]);

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

// useInView
import { useInView } from 'framer-motion';

function FadeInWhenVisible({ children }: { children: React.ReactNode }) {
  const ref = useRef(null);
  const isInView = useInView(ref, { once: true, margin: '-100px' });

  return (
    <motion.div
      ref={ref}
      initial={{ opacity: 0, y: 50 }}
      animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 50 }}
      transition={{ duration: 0.5 }}
    >
      {children}
    </motion.div>
  );
}

Animation Controls#

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

function ControlledAnimation() {
  const controls = useAnimation();

  async function sequence() {
    await controls.start({ x: 100, transition: { duration: 0.5 } });
    await controls.start({ y: 100, transition: { duration: 0.5 } });
    await controls.start({ x: 0, transition: { duration: 0.5 } });
    await controls.start({ y: 0, transition: { duration: 0.5 } });
  }

  return (
    <>
      <motion.div animate={controls} className="box" />
      <button onClick={sequence}>Animate</button>
      <button onClick={() => controls.stop()}>Stop</button>
    </>
  );
}

// Orchestrated animations
function OrchestratedAnimation() {
  const controls = useAnimation();

  useEffect(() => {
    controls.start((i) => ({
      opacity: 1,
      y: 0,
      transition: { delay: i * 0.1 },
    }));
  }, [controls]);

  return (
    <div>
      {items.map((item, i) => (
        <motion.div
          key={item}
          custom={i}
          initial={{ opacity: 0, y: 20 }}
          animate={controls}
        >
          {item}
        </motion.div>
      ))}
    </div>
  );
}

Performance#

// Use will-change for better performance
const optimizedVariants = {
  hidden: { opacity: 0, y: 20 },
  visible: {
    opacity: 1,
    y: 0,
    transition: { duration: 0.3 },
  },
};

// Reduce motion for accessibility
import { useReducedMotion } from 'framer-motion';

function AccessibleAnimation() {
  const shouldReduceMotion = useReducedMotion();

  return (
    <motion.div
      initial={{ opacity: 0, y: shouldReduceMotion ? 0 : 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: shouldReduceMotion ? 0 : 0.5 }}
    >
      Content
    </motion.div>
  );
}

// Lazy motion for smaller bundles
import { LazyMotion, domAnimation, m } from 'framer-motion';

function App() {
  return (
    <LazyMotion features={domAnimation}>
      <m.div animate={{ opacity: 1 }}>
        Lazy loaded animations
      </m.div>
    </LazyMotion>
  );
}

Best Practices#

Performance:
✓ Use transform properties (x, y, scale, rotate)
✓ Avoid animating layout properties
✓ Use will-change sparingly
✓ Lazy load animation features

Accessibility:
✓ Respect prefers-reduced-motion
✓ Don't rely solely on animation for meaning
✓ Keep animations subtle
✓ Allow users to pause animations

Design:
✓ Keep animations short (200-500ms)
✓ Use appropriate easing
✓ Be consistent across the app
✓ Animation should enhance, not distract

Framer Motion provides powerful, declarative animations for React. Use variants for reusable animation states, AnimatePresence for exit animations, and layout animations for fluid UI changes. Always consider performance and accessibility when adding animations.