Framer Motion

import { motion } from "framer-motion";

function FadeInBox() {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 0.5 }}
    >
      안녕하세요
    </motion.div>
  );
}

<motion.div
  animate={{ x: 100 }}
  transition={{
    type: "tween",
    duration: 0.3,
    ease: "easeInOut"
  }}
/>

<motion.div
  animate={{ x: 100 }}
  transition={{
    type: "spring",
    stiffness: 300,  // 스프링 강도 (높을수록 빠르게 도달)
    damping: 20,     // 감쇠 (높을수록 진동 줄어듦)
    mass: 1          // 질량 (높을수록 느리게 반응)
  }}
/>

<motion.div
  animate={{ x: 100, opacity: 1 }}
  transition={{
    x: { type: "spring", stiffness: 300 },
    opacity: { duration: 0.2, ease: "easeOut" }
  }}
/>

const containerVariants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.1  // 자식 요소들이 0.1초 간격으로 순차 등장
    }
  }
};

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

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

const container = {
  visible: {
    transition: {
      staggerChildren: 0.05,
      delayChildren: 0.2,     // 전체 자식 애니메이션 시작 전 딜레이
      staggerDirection: 1     // 1이면 정방향, -1이면 역방향
    }
  }
};

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

function Notification({ isVisible, message }: Props) {
  return (
    <AnimatePresence>
      {isVisible && (
        <motion.div
          key="notification"
          initial={{ opacity: 0, y: -50 }}
          animate={{ opacity: 1, y: 0 }}
          exit={{ opacity: 0, y: -50 }}
          transition={{ duration: 0.3 }}
        >
          {message}
        </motion.div>
      )}
    </AnimatePresence>
  );
}

<AnimatePresence mode="wait">
  {currentTab === "home" && <HomeTab key="home" />}
  {currentTab === "about" && <AboutTab key="about" />}
</AnimatePresence>

function SortableGrid({ items }: { items: Item[] }) {
  return (
    <div className="grid grid-cols-4 gap-4">
      <AnimatePresence initial={false}>
        {items.map((item, index) => {
          return (
            <motion.div
              key={item.id}
              layout
              initial={{ opacity: 0, scale: 0.8 }}
              animate={{ opacity: 1, scale: 1 }}
              exit={{ opacity: 0, scale: 0.8 }}
              transition={{
                layout: { type: "spring", stiffness: 300, damping: 30 },
                opacity: { duration: 0.2 }
              }}
            >
              <Card data={item} />
            </motion.div>
          );
        })}
      </AnimatePresence>
    </div>
  );
}

function ExpandableCard({ selectedId, item, onClick }: Props) {
  return (
    <>
      <motion.div layoutId={`card-${item.id}`} onClick={() => onClick(item.id)}>
        <motion.h2 layoutId={`title-${item.id}`}>{item.title}</motion.h2>
      </motion.div>

      <AnimatePresence>
        {selectedId === item.id && (
          <motion.div layoutId={`card-${item.id}`} className="expanded">
            <motion.h2 layoutId={`title-${item.id}`}>{item.title}</motion.h2>
            <p>{item.description}</p>
          </motion.div>
        )}
      </AnimatePresence>
    </>
  );
}

<motion.button
  whileHover={{ scale: 1.05, backgroundColor: "#f0f0f0" }}
  whileTap={{ scale: 0.95 }}
  whileFocus={{ boxShadow: "0 0 0 3px rgba(66, 153, 225, 0.6)" }}
>
  클릭하세요
</motion.button>

<motion.div
  initial={{ opacity: 0, y: 50 }}
  whileInView={{ opacity: 1, y: 0 }}
  viewport={{ once: true, amount: 0.3 }}
  transition={{ duration: 0.6 }}
>
  스크롤하면 나타남
</motion.div>

<motion.div
  drag            // 드래그 활성화 ("x" 또는 "y"로 축 제한 가능)
  dragConstraints={{ left: -100, right: 100, top: -100, bottom: 100 }}
  dragElastic={0.2}     // 제한 영역 밖으로 얼마나 탄성 있게 나갈 수 있는지
  dragSnapToOrigin      // 놓으면 원래 위치로 돌아감
  whileDrag={{ scale: 1.1 }}
>
  드래그 가능한 요소
</motion.div>

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

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

  async function handleClick() {
    await controls.start({ x: 100, transition: { duration: 0.5 } });
    await controls.start({ y: 100, transition: { duration: 0.3 } });
    await controls.start({ rotate: 180, transition: { duration: 0.4 } });
  }

  return (
    <motion.div animate={controls} onClick={handleClick}>
      순차 애니메이션
    </motion.div>
  );
}

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

function ParallaxCard() {
  const x = useMotionValue(0);
  const y = useMotionValue(0);

  // x 값에 따라 rotateY를 -15~15도로 매핑
  const rotateY = useTransform(x, [-200, 200], [-15, 15]);
  // y 값에 따라 rotateX를 15~-15도로 매핑
  const rotateX = useTransform(y, [-200, 200], [15, -15]);

  function handleMouseMove(event: React.MouseEvent) {
    const rect = event.currentTarget.getBoundingClientRect();
    x.set(event.clientX - rect.left - rect.width / 2);
    y.set(event.clientY - rect.top - rect.height / 2);
  }

  function handleMouseLeave() {
    x.set(0);
    y.set(0);
  }

  return (
    <motion.div
      style={{ rotateX, rotateY, perspective: 600 }}
      onMouseMove={handleMouseMove}
      onMouseLeave={handleMouseLeave}
    >
      3D 틸트 카드
    </motion.div>
  );
}

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

function ProgressBar() {
  const { scrollYProgress } = useScroll();
  // 스크롤 진행률(0~1)을 width(0%~100%)로 변환
  const width = useTransform(scrollYProgress, [0, 1], ["0%", "100%"]);

  return (
    <motion.div
      style={{ width, height: 4, background: "#0070f3" }}
      className="fixed top-0 left-0 z-50"
    />
  );
}

// ❌ reflow 유발
<motion.div animate={{ width: 200, left: 100 }} />

// ✅ GPU 가속
<motion.div animate={{ scaleX: 2, x: 100 }} />

import { LayoutGroup } from "framer-motion";

<LayoutGroup>
  {/* 이 그룹 안에서만 layout 변경을 감지 */}
  <motion.div layout>A</motion.div>
  <motion.div layout>B</motion.div>
</LayoutGroup>