# Скролл-анимации на GSAP — со вкусом

> Скролл-ревилы, которые выглядят дорого и не вызывают укачивание: скоупинг, стаггеры, изинги и контракт prefers-reduced-motion.
>
> 2026-05-22 — y7.hk

## Рамки вкуса

Анимация — приправа, а не блюдо. Три правила, которым я следую на каждом сайте:

- **Только transform и opacity.** Никогда не анимируй `top`, `left`, `width`, `height` — они вызывают layout на каждом кадре.
- **Один паттерн входа на секцию.** Fade-up `y: 20 → 0` со `stagger: 0.1` читается как мастерство; пять разных входов читаются как хаос.
- **Уважай `prefers-reduced-motion`.** Не обсуждается.

## GSAP в React: скоупинг и очистка

```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 при смене роута.

## Изыгры, которые ощущаются человечно

| Ease | Ощущение |
|------|-----------|
| `power3.out` | уверенное появление |
| `back.out(1.5)` | игривый поп |
| `elastic.out(1, 0.5)` | максимум раз на сайт |

Упругий bounce — это баночка специй, а не бутылка соуса.