# Animasi Scroll GSAP, dengan Selera

> Scroll reveal yang terasa mahal tanpa bikin pengunjung mual: scoping, stagger, easing, dan kontrak prefers-reduced-motion.
>
> 2026-05-22 — y7.hk

## Kerangka selera

Animasi itu bumbu, bukan hidangan utama. Tiga aturan yang saya pegang di setiap situs:

- **Hanya transform dan opacity.** Jangan pernah animasikan `top`, `left`, `width`, `height` — mereka memicu layout di setiap frame.
- **Satu pola entrance per section.** Fade-up `y: 20 → 0` dengan `stagger: 0.1` terasa seperti craftsmanship; lima entrance berbeda terasa seperti kekacauan.
- **Hormati `prefers-reduced-motion`.** Tidak bisa ditawar.

## GSAP di React yang scoped dan bersih

```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` memberimu scoping selector **dan** cleanup otomatis — tidak ada ScrollTrigger bocor saat ganti route.

## Easing yang terasa manusiawi

| Ease | Terasa seperti |
|------|-----------|
| `power3.out` | tiba dengan percaya diri |
| `back.out(1.5)` | pop yang playful |
| `elastic.out(1, 0.5)` | maksimal sekali per situs |

Bounce elastis itu toples rempah, bukan botol saus.