Framer Motion 기본 개념

Framer Motion은 React용 선언적 애니메이션 라이브러리입니다. CSS 애니메이션이나 requestAnimationFrame을 직접 다루는 것보다 훨씬 직관적이며, 물리 기반 spring 애니메이션을 기본 지원합니다.

import { motion } from 'framer-motion';

function FadeIn({ children }) {
  return (
    
      {children}
    
  );
}

Variants 패턴

const containerVariants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: { staggerChildren: 0.1, delayChildren: 0.2 }
  }
};

const itemVariants = {
  hidden: { opacity: 0, x: -20 },
  visible: {
    opacity: 1, x: 0,
    transition: { type: 'spring', stiffness: 300, damping: 24 }
  }
};

function StaggerList({ items }) {
  return (
    
      {items.map((item) => (
        
          {item.text}
        
      ))}
    
  );
}

AnimatePresence — 퇴장 애니메이션

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

function NotificationList({ notifications, onDismiss }) {
  return (
    
      {notifications.map((n) => (
         onDismiss(n.id)}
        >
          {n.message}
        
      ))}
    
  );
}

Layout Animation

function ExpandableCard({ isOpen, onClick, title, content }) {
  return (
    
      {title}
      
        {isOpen && (
          
            {content}
          
        )}
      
    
  );
}

useScroll과 useTransform

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

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

  return (
    
      
Parallax Hero Section
    
  );
}

성능 최적화 팁

import { LazyMotion, domAnimation, m } from 'framer-motion';

function App() {
  return (
    
      Optimized
    
  );
}

실전 팁

• spring 애니메이션이 duration 기반보다 자연스럽습니다. stiffness와 damping 값을 조절하세요.
• AnimatePresence의 mode="wait"은 이전 요소가 퇴장한 후 새 요소가 등장하므로, 페이지 전환에 적합합니다.
• layout 속성은 강력하지만, 불필요한 곳에 사용하면 성능이 저하될 수 있으니 필요한 요소에만 적용하세요.
• 복잡한 애니메이션은 useAnimation 훅으로 명령형 제어가 가능합니다.