Маркеры ScrollTrigger

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

Включение маркеров

Для активации маркеров достаточно установить свойство markers в объекте конфигурации ScrollTrigger:

gsap.to(".box", {
  x: 400,
  scrollTrigger: {
    trigger: ".box",
    start: "top center",
    end: "bottom 100px",
    markers: true
  }
});

В этом примере на странице появятся визуальные индикаторы:

  • start — точка начала триггера.
  • end — точка окончания триггера.
  • trigger — элемент, с которым связана анимация.

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

Настройка внешнего вида маркеров

Свойство markers можно задать не только как true, но и как объект с деталями внешнего вида:

scrollTrigger: {
  trigger: ".box",
  start: "top center",
  end: "bottom 100px",
  markers: {
    startColor: "green",
    endColor: "red",
    fontSize: "16px",
    indent: 20
  }
}

Ключевые свойства:

  • startColor и endColor — задают цвет маркеров начала и конца анимации.
  • fontSize — размер текста на маркере.
  • indent — отступ маркера от границы окна браузера.

Использование этих настроек делает визуализацию более наглядной при работе с несколькими триггерами на одной странице.

Назначение маркеров для сложных сцен

В проектах с большим количеством элементов и перекрывающимися триггерами важно использовать уникальные имена маркеров:

gsap.to(".box", {
  x: 400,
  scrollTrigger: {
    trigger: ".box",
    start: "top center",
    end: "bottom 100px",
    markers: {
      startColor: "blue",
      endColor: "orange",
      fontSize: "14px",
      indent: 30
    },
    id: "boxAnimation"
  }
});

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

Динамическое изменение маркеров

ScrollTrigger поддерживает динамическое обновление маркеров при изменении параметров триггера. Для этого используется метод refresh():

ScrollTrigger.refresh();

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

Работа с маркерами в сочетании с timeline

Маркеры удобно использовать при анимациях через Timeline, чтобы видеть, как разные сегменты анимации реагируют на прокрутку:

let tl = gsap.timeline({
  scrollTrigger: {
    trigger: ".container",
    start: "top center",
    end: "bottom center",
    scrub: true,
    markers: true
  }
});

tl.to(".box1", { x: 300 })
  .to(".box2", { y: 200 })
  .to(".box3", { rotation: 360 });

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

Практические рекомендации

  1. Использовать маркеры только на этапе разработки. В продакшене их отключают (markers: false) для чистоты интерфейса.
  2. Для сложных макетов стоит задавать id каждому триггеру, чтобы избежать наложения визуальных индикаторов.
  3. Настройка цветов и отступов помогает различать начало и конец разных анимаций на одном экране.
  4. При динамическом контенте важно вызывать ScrollTrigger.refresh() после изменений DOM, чтобы маркеры оставались точными.

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

Оглавление