Визуальная отладка

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

Включение визуальной отладки

Для отображения отладочной информации используется метод addIndicators(), который добавляет визуальные метки к каждой сцене. Эти метки показывают:

  • Триггер — точку на странице, при достижении которой активируется сцена.
  • Начало сцены — положение элемента или страницы, где сцена считается активной.
  • Конец сцены — границу, после которой сцена считается завершённой.

Пример подключения индикаторов:

var controller = new ScrollMagic.Controller();

var scene = new ScrollMagic.Scene({
    triggerElement: "#trigger",
    duration: 300
})
.setTween("#animate", {opacity: 1, y: -50})
.addIndicators({name: "Fade Scene", colorStart: "green", colorEnd: "red"})
.addTo(controller);

Здесь colorStart и colorEnd определяют цвета линий начала и конца сцены, а name добавляет текстовую метку для идентификации.

Настройка визуальных индикаторов

Метод addIndicators() поддерживает несколько опций, которые позволяют тонко настроить отображение:

  • name — текст, отображаемый рядом с индикатором.
  • indent — отступ слева в пикселях, чтобы избежать наложения нескольких индикаторов.
  • colorStart / colorEnd / colorTrigger — цвета начала, конца и триггера сцены.
  • indent полезен, когда на странице несколько сцен, чтобы индикаторы не перекрывались.

Пример с индивидуальными настройками:

scene.addIndicators({
    name: "Slide Up",
    colorStart: "blue",
    colorEnd: "orange",
    colorTrigger: "purple",
    indent: 50
});

Взаимодействие с несколькими сценами

При наличии нескольких сцен важно, чтобы индикаторы не перекрывали друг друга. Для этого используют различные значения indent. Кроме того, индикаторы помогают визуально сопоставить анимации с DOM-структурой, облегчая отладку сложных последовательностей, особенно когда сцены имеют разные длительности и триггеры.

Пример управления несколькими сценами:

var scene1 = new ScrollMagic.Scene({triggerElement: "#trigger1", duration: 200})
    .setTween("#box1", {x: 100})
    .addIndicators({name: "Scene 1", indent: 0})
    .addTo(controller);

var scene2 = new ScrollMagic.Scene({triggerElement: "#trigger2", duration: 400})
    .setTween("#box2", {y: 200})
    .addIndicators({name: "Scene 2", indent: 20})
    .addTo(controller);

Динамическое обновление индикаторов

Индикаторы автоматически обновляются при изменении размеров окна браузера и скролла страницы. При изменении DOM или анимаций иногда требуется принудительно обновить контроллер, чтобы индикаторы отразили новые позиции:

controller.update(true);

Этот метод пересчитывает положение всех сцен и корректно отображает индикаторы.

Ограничения визуальной отладки

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

Визуальные индикаторы и сложные анимации

При использовании TimelineMax / GSAP визуальные индикаторы позволяют:

  • Синхронизировать сложные цепочки анимаций с точками скролла.
  • Проверять корректность синхронизации нескольких tweens внутри одной сцены.
  • Отслеживать влияние offset на триггерные точки.

Пример сцены с Timeline:

var tl = new TimelineMax();
tl.to("#box", 1, {x: 100})
  .to("#box", 1, {y: 50});

var scene = new ScrollMagic.Scene({
    triggerElement: "#trigger",
    duration: 400
})
.setTween(tl)
.addIndicators({name: "Timeline Scene"})
.addTo(controller);

Индикаторы помогут точно увидеть, где начинается и заканчивается каждый этап анимации.

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

  • Использовать addIndicators() на этапе разработки каждой сцены.
  • Выбирать контрастные цвета для начала, конца и триггера сцены.
  • Применять indent для предотвращения наложения текста и линий индикаторов.
  • Всегда проверять обновление индикаторов при изменении размеров страницы или анимаций.

Визуальная отладка в ScrollMagic превращает абстрактные значения triggerHook, duration и offset в наглядные элементы, значительно ускоряя процесс разработки и устранения ошибок.

Оглавление