# GSAP Scroll Animation — có gu thẩm mỹ

> Scroll reveal trông đắt tiền mà không làm người xem chóng mặt: scoping, stagger, easing và cam kết prefers-reduced-motion.
>
> 2026-05-22 — y7.hk

## Khung 'gu thẩm mỹ'

Animation là gia vị, không phải món chính. Ba quy tắc tôi theo trên mọi site:

- **Chỉ transform và opacity.** Đừng bao giờ animate `top`, `left`, `width`, `height` — chúng kích hoạt layout mỗi frame.
- **Một pattern entrance mỗi section.** Fade-up `y: 20 → 0` với `stagger: 0.1` trông như tay nghề; năm kiểu entrance khác nhau trông như hỗn loạn.
- **Tôn trọng `prefers-reduced-motion`.** Không thương lượng.

## GSAP trong React có scope và tự dọn dẹp

```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` cho bạn scoping selector **và** cleanup tự động — không còn ScrollTrigger rò rỉ khi đổi route.

## Những easing cảm giác 'con người'

| Ease | Cảm giác |
|------|-----------|
| `power3.out` | đến nơi tự tin |
| `back.out(1.5)` | bật ra tinh nghịch |
| `elastic.out(1, 0.5)` | tối đa một lần mỗi site |

Elastic bounce là lọ gia vị, không phải chai nước sốt.