# GSAP Kaydırma Animasyonları, Zevkle

> Ziyaretçileri hareket hastası etmeden pahalı hissettiren kaydırma açılışları: kapsam, stagger'lar, easing'ler ve reduced-motion sözleşmesi.
>
> 2026-05-22 — y7.hk

## Zevk çerçevesi

Animasyon yemek değil baharattır. Her sitede uyguladığım üç kural:

- **Sadece transform ve opacity.** `top`, `left`, `width`, `height` asla anime edilmez — her karede layout tetikler.
- **Bölüm başına tek giriş pattern'i.** `stagger: 0.1` ile `y: 20 → 0` fade-up zanaat gibi okunur; beş farklı giriş kaos gibi okunur.
- **`prefers-reduced-motion`'a saygı.** Tartışılmaz.

## React'te kapsamlı, temizlenen 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` size selector kapsamı **ve** otomatik temizlik verir — rota değişimlerinde sızan ScrollTrigger'lar olmaz.

## İnsan hissi veren easing'ler

| Ease | Hissi |
|------|-------|
| `power3.out` | kendinden emin varış |
| `back.out(1.5)` | oyuncu zıplama |
| `elastic.out(1, 0.5)` | site başına en fazla bir kez |

Elastik zıplama baharat kavanozudur, sos şişesi değil.