Интеграция с ScrollTrigger

GSAP (GreenSock Animation Platform) предоставляет мощные средства для создания сложных анимаций, а плагин ScrollTrigger позволяет синхронизировать эти анимации с прокруткой страницы. Использование ScrollTrigger расширяет возможности взаимодействия пользователя с контентом и делает интерфейс динамичным и живым.

Подключение ScrollTrigger

Для работы с ScrollTrigger необходимо подключить сам GSAP и его плагин:

import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

Регистрация плагина через gsap.registerPlugin обязательна для его корректного функционирования.

Базовое использование ScrollTrigger

ScrollTrigger позволяет запускать анимации в момент, когда определенный элемент появляется в области видимости. Простейший пример:

gsap.to(".box", {
  x: 400,
  duration: 2,
  scrollTrigger: {
    trigger: ".box",
    start: "top 80%", 
    end: "bottom 20%", 
    scrub: true, 
    markers: true
  }
});

Ключевые параметры:

  • trigger — элемент, относительно которого отслеживается прокрутка.
  • start и end — точки начала и конца анимации относительно окна и элемента. Формат: "позицияЭлемента позицияВидимойОбласти".
  • scrub — синхронизация анимации с прокруткой. Если true, анимация будет “привязана” к скроллу.
  • markers — визуальные метки для отладки, показывающие точки начала и конца анимации.

Анимации по скроллу

ScrollTrigger поддерживает любые GSAP-анимации: gsap.to, gsap.from, gsap.fromTo. Пример с fromTo:

gsap.fromTo(".circle",
  { scale: 0, opacity: 0 },
  { scale: 1, opacity: 1, duration: 2,
    scrollTrigger: {
      trigger: ".circle",
      start: "top center",
      end: "bottom center",
      scrub: 1
    }
  }
);

scrub может быть числовым, задавая задержку синхронизации анимации с прокруткой.

Создание секвенций анимаций

Для сложных анимаций используют Timeline, который также может быть привязан к ScrollTrigger:

const tl = gsap.timeline({
  scrollTrigger: {
    trigger: ".section",
    start: "top top",
    end: "bottom bottom",
    scrub: true,
    pin: true
  }
});

tl.to(".text", { y: -100, opacity: 0, duration: 1 })
  .to(".image", { x: 200, rotation: 360, duration: 2 })
  .to(".button", { scale: 1.5, duration: 1 });

Особенности:

  • pin: true фиксирует элемент на месте во время прокрутки.
  • Timeline позволяет объединять последовательные анимации в единый поток, синхронизированный со скроллом.

Параллакс и множественные триггеры

ScrollTrigger удобно использовать для создания параллакс-эффектов:

gsap.to(".background", {
  y: -200,
  ease: "none",
  scrollTrigger: {
    trigger: ".parallax-section",
    start: "top bottom",
    end: "bottom top",
    scrub: true
  }
});

Несколько элементов могут иметь отдельные ScrollTrigger на одной странице, и GSAP корректно обрабатывает их независимое движение.

Управление событиями ScrollTrigger

ScrollTrigger предоставляет набор колбеков:

  • onEnter — при входе в область триггера.
  • onLeave — при выходе.
  • onEnterBack и onLeaveBack — аналогично для обратного скролла.
  • onUpdate — при каждом обновлении позиции скролла.

Пример использования:

ScrollTrigger.create({
  trigger: ".alert",
  start: "top 90%",
  onEnter: () => console.log("Элемент вошёл в видимую область"),
  onLeaveBack: () => console.log("Элемент вышел обратно вверх")
});

Адаптация под разные экраны

ScrollTrigger поддерживает медиазапросы через объект matchMedia, позволяя создавать адаптивные анимации:

ScrollTrigger.matchMedia({
  "(min-width: 800px)": function() {
    gsap.to(".box", { x: 500, scrollTrigger: { trigger: ".box", start: "top 80%" } });
  },
  "(max-width: 799px)": function() {
    gsap.to(".box", { x: 200, scrollTrigger: { trigger: ".box", start: "top 90%" } });
  }
});

Это позволяет оптимизировать поведение анимаций для мобильных и десктопных устройств.

Производительность и оптимизация

  • Использовать scrub только при необходимости плавной синхронизации с прокруткой.
  • Минимизировать количество одновременно активных ScrollTrigger на странице.
  • При сложных сценах лучше использовать pin: true выборочно, так как фиксация элементов может нагружать рендер.

ScrollTrigger в сочетании с GSAP обеспечивает полный контроль над анимацией элементов при прокрутке, позволяя создавать сложные интерактивные эффекты с высокой производительностью и гибкой адаптивностью.

Оглавление