# GSAP स्क्रॉल एनिमेशन, स्वाद से

> ऐसे स्क्रॉल रिवील जो महँगे महसूस होते हैं बिना विज़िटर को चक्कर दिए: स्कोपिंग, स्टैगर, ईज़ और रिड्यूस्ड-मोशन कॉन्ट्रैक्ट।
>
> 2026-05-22 — y7.hk

## स्वाद का फ़्रेमवर्क

एनिमेशन मसाला है, खाना नहीं। हर साइट पर मैं तीन नियम मानता हूँ:

- **सिर्फ़ transform और opacity.** `top`, `left`, `width`, `height` कभी एनिमेट न करें — वे हर फ़्रेम पर लेआउट ट्रिगर करते हैं।
- **हर सेक्शन में एक एंट्रेंस पैटर्न.** `stagger: 0.1` के साथ `y: 20 → 0` फ़ेड-अप क्राफ़्ट लगता है; पाँच अलग एंट्रेंस अराजकता लगती है।
- **`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)` | साइट पर अधिकतम एक बार |

इलास्टिक बाउंस मसाले की दानी है, सॉस की बोतल नहीं।