IntermediateАнимация30 мин22 мая 2026 г.

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

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

Рамки вкуса

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

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

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

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 — это баночка специй, а не бутылка соуса.

Туториалы