# GSAP scroll animatsiyalari, did bilan

> Tashrif buyuruvchilarni harakatdan charchatmaydigan qimmat taassurotli scroll ochilishlari: scope, staggerlar, easinglar va reduced-motion kelishuvi.
>
> 2026-05-22 — y7.hk

## Did freymvorki

Animatsiya — bu taom emas, ziravor. Har bir saytda men uch qoidaga amal qilaman:

- **Faqat transform va opacity.** `top`, `left`, `width`, `height` hech qachon animatsiya qilinmaydi — ular har kadrda layoutni ishga tushiradi.
- **Har bo'limga bitta ochilish patterni.** `stagger: 0.1` bilan `y: 20 → 0` fade-up hunarmandchilikdek ko'rinadi; besh xil ochilish tartibsizlikdek ko'rinadi.
- **`prefers-reduced-motion`ga hurmat.** Muzokaraga kirmaydi.

## Reactda scoped va tozalanadigan 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` selektor scopelash **va** avtomatik tozalashni beradi — yo'l o'zgarganda oqib qolgan ScrollTriggerlar yo'q.

## Insoniy seziladigan easinglar

| Ease | Tuyg'usi |
|------|----------|
| `power3.out` | ishonchli yetib kelish |
| `back.out(1.5)` | o'yinchan sakrash |
| `elastic.out(1, 0.5)` | saytga maksimal bir marta |

Elastik sakrash — bu ziravor idishi, sous shishasi emas.