// requestAnimationFrame 기본 사용법
let startTime = null;
const duration = 1000; // 1초 동안 애니메이션

function animate(timestamp) {
  if (!startTime) startTime = timestamp;
  const elapsed = timestamp - startTime;
  const progress = Math.min(elapsed / duration, 1); // 0 ~ 1 사이 값

  // 요소를 0px에서 300px까지 이동
  const element = document.getElementById('box');
  element.style.transform = `translateX(${progress * 300}px)`;

  if (progress < 1) {
    requestAnimationFrame(animate); // 아직 안 끝났으면 다음 프레임 요청
  }
}

requestAnimationFrame(animate); // 시작!

// 자주 쓰이는 이징 함수들
const easing = {
  // 선형 (딱딱함)
  linear: t => t,

  // 천천히 시작해서 빠르게 끝남
  easeIn: t => t * t,

  // 빠르게 시작해서 천천히 끝남
  easeOut: t => t * (2 - t),

  // 천천히 시작, 빠르게 중간, 천천히 끝
  easeInOut: t => t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t,

  // 탄성 효과 (살짝 튕기는 느낌)
  elastic: t => {
    const c4 = (2 * Math.PI) / 3;
    return t === 0 ? 0 : t === 1 ? 1
      : Math.pow(2, -10 * t) * Math.sin((t * 10 - 0.75) * c4) + 1;
  }
};

// 사용 예시
function animate(timestamp) {
  const progress = elapsed / duration;
  const easedProgress = easing.easeInOut(progress); // 이징 적용!
  element.style.transform = `translateX(${easedProgress * 300}px)`;
}

// Web Animations API 사용법
const element = document.getElementById('box');

// animate() 메서드로 애니메이션 생성
const animation = element.animate(
  // 키프레임 배열
  [
    { transform: 'translateX(0px)', opacity: 1 },
    { transform: 'translateX(300px)', opacity: 0.5 },
    { transform: 'translateX(0px)', opacity: 1 }
  ],
  // 옵션
  {
    duration: 2000,      // 2초
    iterations: Infinity, // 무한 반복
    easing: 'ease-in-out',
    fill: 'forwards'     // 끝난 후 마지막 상태 유지
  }
);

// 제어 메서드들
animation.pause();   // 일시정지
animation.play();    // 재생
animation.reverse(); // 역방향 재생
animation.cancel();  // 취소

// 완료 이벤트
animation.onfinish = () => console.log('애니메이션 완료! 🎉');

// npm으로 설치
npm install gsap

// 또는 CDN으로 바로 사용
// <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>

// ES Module import
import { gsap } from "gsap";

// 플러그인 import (필요한 것만)
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { TextPlugin } from "gsap/TextPlugin";

// 플러그인 등록 (반드시 해야 함!)
gsap.registerPlugin(ScrollTrigger, TextPlugin);

// gsap.to() - 현재 상태에서 목표 상태로
gsap.to(".box", {
  x: 300,           // translateX(300px)
  y: 100,           // translateY(100px)
  rotation: 360,    // 360도 회전
  scale: 1.5,       // 1.5배 크기
  opacity: 0.5,     // 투명도 50%
  duration: 1.5,    // 1.5초
  ease: "power2.out", // 이징
  delay: 0.5,       // 0.5초 후 시작
  repeat: 2,        // 2번 반복 (-1이면 무한)
  yoyo: true,       // 왕복 애니메이션
});

// gsap.from() - 지정한 상태에서 현재 상태로 (등장 효과에 최적!)
gsap.from(".card", {
  y: 50,
  opacity: 0,
  duration: 0.8,
  ease: "back.out(1.7)", // 살짝 튕기는 효과
});

// gsap.fromTo() - 시작값과 끝값 모두 지정
gsap.fromTo(".element",
  { x: -200, opacity: 0 },  // 시작 상태
  { x: 0, opacity: 1, duration: 1 }  // 끝 상태
);

// 콜백 함수들
gsap.to(".box", {
  x: 300,
  duration: 1,
  onStart: () => console.log("시작!"),
  onComplete: () => console.log("완료!"),
  onUpdate: () => console.log("진행 중..."),
});

// 타임라인 생성
const tl = gsap.timeline({
  defaults: { duration: 0.8, ease: "power2.out" }, // 공통 기본값
  repeat: -1,    // 전체 타임라인 무한 반복
  yoyo: true,    // 왕복
  paused: true,  // 처음엔 멈춰있음
});

// 순차적으로 애니메이션 추가
tl.from(".title", { y: -50, opacity: 0 })
  .from(".subtitle", { y: 30, opacity: 0 })  // 이전 것 끝나고 시작
  .from(".button", { scale: 0, opacity: 0 }, "-=0.3") // 0.3초 겹쳐서 시작
  .from(".image", { x: 100, opacity: 0 }, "<") // 이전 것과 동시에 시작
  .to(".highlight", { backgroundColor: "#ffff00" }, "+=0.5"); // 0.5초 후 시작

// 타임라인 제어
tl.play();
tl.pause();
tl.reverse();
tl.seek(1.5);    // 1.5초 지점으로 이동
tl.progress(0.5); // 50% 지점으로 이동

// 레이블 사용 (특정 지점에 이름 붙이기)
tl.addLabel("intro", 0)
  .addLabel("main", 2)
  .addLabel("outro", 4);

tl.play("main"); // "main" 레이블부터 재생

// 기본 stagger - 0.1초 간격으로 순차 등장
gsap.from(".card", {
  y: 50,
  opacity: 0,
  duration: 0.6,
  stagger: 0.1, // 각 요소 사이 0.1초 딜레이
});

// 고급 stagger 설정
gsap.from(".grid-item", {
  scale: 0,
  opacity: 0,
  duration: 0.5,
  stagger: {
    amount: 1.5,    // 전체 stagger 시간
    from: "center", // 중앙에서 바깥으로 (start/end/center/edges/random)
    grid: [3, 4],   // 3행 4열 그리드
    axis: "x",      // x축 방향으로만
  }
});

import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);

// 기본 스크롤 트리거
gsap.from(".section", {
  y: 100,
  opacity: 0,
  duration: 1,
  scrollTrigger: {
    trigger: ".section",    // 트리거 요소
    start: "top 80%",       // 요소 상단이 뷰포트 80% 지점에 닿으면 시작
    end: "bottom 20%",      // 요소 하단이 뷰포트 20% 지점에 닿으면 끝
    toggleActions: "play none none reverse",
    // 각각: onEnter, onLeave, onEnterBack, onLeaveBack
    markers: true,          // 개발 중 디버깅용 마커 표시
  }
});

// 스크롤에 따라 실시간으로 움직이는 효과 (scrub)
gsap.to(".parallax-bg", {
  y: -200,
  scrollTrigger: {
    trigger: ".hero",
    start: "top top",
    end: "bottom top",
    scrub: 1, // 스크롤에 부드럽게 연동 (숫자 = 지연 시간)
  }
});

// 핀(pin) - 스크롤해도 요소가 고정되는 효과
gsap.to(".progress-bar", {
  width: "100%",
  scrollTrigger: {
    trigger: ".content",
    start: "top top",
    end: "bottom bottom",
    scrub: true,
    pin: ".sidebar", // 사이드바를 화면에 고정
  }
});

// 설치
npm install framer-motion

// 기본 import
import { motion } from "framer-motion";

// 가장 기본적인 사용법 - motion.div로 감싸기만 하면 됨!
function App() {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}  // 초기 상태
      animate={{ opacity: 1, y: 0 }}   // 목표 상태
      transition={{ duration: 0.5 }}   // 전환 설정
    >
      안녕하세요! 🎉
    </motion.div>
  );
}

// transition 다양한 설정
<motion.div
  animate={{ x: 100 }}
  transition={{
    // 기본 타입
    type: "tween",      // 일반 트윈 (기본값)
    duration: 0.5,
    ease: "easeInOut",

    // 또는 스프링 물리 효과
    type: "spring",
    stiffness: 300,    // 스프링 강도 (높을수록 빠름)
    damping: 20,       // 감쇠 (낮을수록 많이 튕김)
    mass: 1,           // 질량
    bounce: 0.25,      // 바운스 양

    // 또는 관성 효과
    type: "inertia",
    velocity: 200,     // 초기 속도

    // 공통 옵션
    delay: 0.2,        // 딜레이
    repeat: Infinity,  // 반복
    repeatType: "reverse", // 반복 타입 (loop/reverse/mirror)
    repeatDelay: 0.5,  // 반복 사이 딜레이
  }}
/>

// variants 정의
const containerVariants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.1, // 자식들 0.1초 간격으로 순차 등장
      delayChildren: 0.3,   // 자식들 시작 전 0.3초 딜레이
    }
  }
};

const itemVariants = {
  hidden: { y: 20, opacity: 0 },
  visible: {
    y: 0,
    opacity: 1,
    transition: { type: "spring", stiffness: 300 }
  }
};

// 컴포넌트에서 사용
function CardList() {
  return (
    <motion.ul
      variants={containerVariants}
      initial="hidden"
      animate="visible"
    >
      {items.map(item => (
        <motion.li
          key={item.id}
          variants={itemVariants}
          // initial, animate를 따로 안 써도 부모에서 자동 전파!
        >
          {item.text}
        </motion.li>
      ))}
    </motion.ul>
  );
}

// 제스처 애니메이션
<motion.button
  // 호버 시 애니메이션
  whileHover={{
    scale: 1.05,
    backgroundColor: "#7bb8f0",
    boxShadow: "0 10px 30px rgba(0,0,0,0.2)"
  }}
  // 클릭(탭) 시 애니메이션
  whileTap={{ scale: 0.95 }}
  // 포커스 시 애니메이션
  whileFocus={{ outline: "2px solid #7bb8f0" }}
  transition={{ type: "spring", stiffness: 400, damping: 17 }}
>
  클릭해봐! 🎯
</motion.button>

// 드래그 기능
<motion.div
  drag                    // 드래그 활성화
  dragConstraints={{      // 드래그 범위 제한
    top: -50,
    left: -50,
    right: 50,
    bottom: 50
  }}
  dragElastic={0.2}       // 탄성 (0~1)
  dragMomentum={true}     // 드래그 후 관성
  whileDrag={{ scale: 1.1, cursor: "grabbing" }}
>
  드래그해봐! 🖱️
</motion.div>

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

function Modal({ isOpen, onClose }) {
  return (
    <AnimatePresence>
      {isOpen && (
        <motion.div
          className="modal-overlay"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}  // 언마운트 시 애니메이션!
          onClick={onClose}
        >
          <motion.div
            className="modal-content"
            initial={{ scale: 0.8, opacity: 0, y: 20 }}
            animate={{ scale: 1, opacity: 1, y: 0 }}
            exit={{ scale: 0.8, opacity: 0, y: 20 }}
            transition={{ type: "spring", damping: 25, stiffness: 300 }}
            onClick={e => e.stopPropagation()}
          >
            모달 내용 🎊
          </motion.div>
        </motion.div>
      )}
    </AnimatePresence>
  );
}

// 리스트 아이템 추가/제거 애니메이션
function TodoList({ items }) {
  return (
    <AnimatePresence>
      {items.map(item => (
        <motion.div
          key={item.id}
          initial={{ opacity: 0, height: 0 }}
          animate={{ opacity: 1, height: "auto" }}
          exit={{ opacity: 0, height: 0 }}
          transition={{ duration: 0.3 }}
        >
          {item.text}
        </motion.div>
      ))}
    </AnimatePresence>
  );
}

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

function ParallaxSection() {
  const { scrollYProgress } = useScroll(); // 전체 페이지 스크롤 진행도 (0~1)

  // 스크롤 값을 다른 값으로 변환
  const y = useTransform(scrollYProgress, [0, 1], [0, -300]);
  const opacity = useTransform(scrollYProgress, [0, 0.5], [1, 0]);
  const scale = useTransform(scrollYProgress, [0, 0.3], [1, 1.2]);

  // 스프링으로 부드럽게 만들기
  const smoothY = useSpring(y, { stiffness: 100, damping: 30 });

  return (
    <motion.div style={{ y: smoothY, opacity, scale }}>
      패럴랙스 효과! 🌊
    </motion.div>
  );
}

// 특정 요소 기준 스크롤
function SectionAnimation() {
  const ref = useRef(null);
  const { scrollYProgress } = useScroll({
    target: ref,
    offset: ["start end", "end start"] // 요소 기준 시작/끝 지점
  });

  const x = useTransform(scrollYProgress, [0, 1], [-100, 100]);

  return (
    <div ref={ref}>
      <motion.div style={{ x }}>
        스크롤하면 움직여요! 🎯
      </motion.div>
    </div>
  );
}

// layout prop 하나만 추가하면 크기/위치 변화가 자동으로 애니메이션됨!
function ExpandableCard({ isExpanded, onClick }) {
  return (
    <motion.div
      layout  // 이거 하나로 레이아웃 변화 자동 애니메이션!
      onClick={onClick}
      style={{
        width: isExpanded ? 300 : 150,
        height: isExpanded ? 200 : 100,
      }}
    >
      <motion.h2 layout="position">제목</motion.h2>
      {isExpanded && (
        <motion.p
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
        >
          펼쳐진 내용...
        </motion.p>
      )}
    </motion.div>
  );
}

// layoutId - 다른 컴포넌트 간 공유 레이아웃 애니메이션 (Shared Layout)
// 리스트 → 상세 페이지 전환 같은 효과
function ListItem({ item, onClick }) {
  return (
    <motion.div layoutId={`card-${item.id}`} onClick={onClick}>
      <motion.img layoutId={`image-${item.id}`} src={item.img} />
      <motion.h3 layoutId={`title-${item.id}`}>{item.title}</motion.h3>
    </motion.div>
  );
}

function DetailView({ item }) {
  return (
    <motion.div layoutId={`card-${item.id}`}>
      <motion.img layoutId={`image-${item.id}`} src={item.img} />
      <motion.h3 layoutId={`title-${item.id}`}>{item.title}</motion.h3>
      <p>상세 내용...</p>
    </motion.div>
  );
}