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

> 비싸 보이지만 멀미를 유발하지 않는 스크롤 리빌: 스코핑, 스태거, 이징, 그리고 reduced-motion 약속.
>
> 2026-05-22 — y7.hk

## 취향의 프레임워크

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

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

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

```tsx
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)` | 사이트당 최대 한 번 |

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