Базовая настройка: trigger и markers

GSAP (GreenSock Animation Platform) предоставляет мощный набор инструментов для анимации в JavaScript. Одним из ключевых компонентов современного подхода к скролл-анимации является плагин ScrollTrigger, который позволяет синхронизировать анимации с прокруткой страницы.

Опция trigger

trigger определяет элемент DOM, который служит отправной точкой для активации анимации. Этот элемент используется ScrollTrigger для вычисления позиции на странице, при которой анимация должна начаться и закончиться.

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

gsap.to(".box", {
  x: 500,
  scrollTrigger: {
    trigger: ".box",
    start: "top center",
    end: "bottom top",
    scrub: true
  }
});

Разбор ключевых параметров:

  • trigger: ".box" – элемент, относительно которого будет вычисляться момент начала и конца анимации.
  • start: "top center" – точка начала анимации: верхняя граница триггера (top) встретится с центром окна просмотра (center).
  • end: "bottom top" – точка окончания анимации: нижняя граница триггера (bottom) встретится с верхней границей окна просмотра (top).
  • scrub: true – синхронизация анимации со скроллом. Анимация будет двигаться пропорционально прокрутке.

Важно: trigger не обязательно должен быть анимируемым элементом. Можно использовать любой DOM-узел, который имеет координаты на странице.

Опция markers

markers — это инструмент отладки. При установке markers: true GSAP визуально показывает начало и конец триггера, а также текущую позицию скролла относительно этих точек. Это особенно полезно при сложных анимациях, где важно точно понимать, когда активируются события.

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

gsap.to(".circle", {
  y: 300,
  scrollTrigger: {
    trigger: ".circle",
    start: "top 80%",
    end: "bottom 20%",
    markers: true,
    scrub: 1
  }
});

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

  • Отображаются линии с подписью start и end.
  • Цвета линий различаются для визуального разделения.
  • Можно настроить кастомные маркеры через объект:
markers: {
  startColor: "green",
  endColor: "red",
  fontSize: "16px",
  indent: 10
}

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

Совместное использование trigger и markers

Часто для сложных скролл-анимаций создаются сценарии, где один trigger управляет несколькими анимациями, а markers помогают визуально проверить правильность стартовых и конечных позиций.

gsap.timeline({
  scrollTrigger: {
    trigger: ".section",
    start: "top 75%",
    end: "bottom 25%",
    markers: true,
    scrub: true
  }
})
.to(".text", { opacity: 1, y: -50 })
.to(".image", { scale: 1.2, rotation: 15 }, "<");

Пояснения:

  • Использование .timeline() позволяет объединять несколько анимаций в единую последовательность.
  • Символ < означает, что анимация .image начнется одновременно с предыдущей.
  • markers позволяют моментально проверить, правильно ли рассчитаны точки start и end для всей последовательности.

Тонкости работы

  • trigger может быть абсолютно или относительно позиционированным элементом. GSAP корректно вычисляет позиции вне зависимости от CSS-свойств position.
  • Для элементов внутри скролл-контейнера с overflow: auto необходимо указать scroller, чтобы ScrollTrigger считал прокрутку внутри контейнера, а не окна браузера.
  • При изменении размеров окна рекомендуется использовать ScrollTrigger.refresh(), чтобы пересчитать позиции триггеров.

Использование trigger и markers совместно создаёт точную и наглядную систему управления анимацией при прокрутке, позволяя добиваться высокоточной синхронизации и упрощает отладку сложных интерфейсных эффектов.

Оглавление