GSAP 스크롤 애니메이션, 절제 있게

취향의 프레임워크

애니메이션은 메인 요리가 아니라 양념이다. 모든 사이트에서 지키는 세 가지 규칙:

• transform과 opacity만. top, left, width, height는 절대 애니메이션하지 말 것 — 매 프레임 레이아웃을 유발한다.
• 섹션당 하나의 진입 패턴. y: 20 → 0 페이드업에 stagger: 0.1은 장인 정신으로 읽히고, 다섯 가지 진입은 혼돈으로 읽힌다.
• prefers-reduced-motion 존중. 협상 불가.

React에서 스코프와 정리가 보장되는 GSAP

useGSAP(() => {
  gsap.fromTo(".card",
    { y: 20, opacity: 0 },
    {
      scrollTrigger: { trigger: containerRef.current, start: "top 85%" },
      y: 0, opacity: 1, duration: 0.6, stagger: 0.1, ease: "back.out(1.5)",
    }
  );
}, { scope: containerRef });

scope는 셀렉터 스코핑과 자동 정리를 동시에 준다 — 라우트 변경 시 ScrollTrigger가 새지 않는다.

인간적으로 느껴지는 이징

이징	느낌
power3.out	자신감 있는 도착
back.out(1.5)	장난스러운 팝
elastic.out(1, 0.5)	사이트당 최대 한 번

탄성 바운스는 간장통이 아니라 향신료 병이다.