Смещение триггера через offset

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

var controller = new ScrollMagic.Controller();

var scene = new ScrollMagic.Scene({
    triggerElement: "#myElement",
    offset: 100 // смещение на 100px вниз относительно верхнего края окна
})
.setClassToggle("#myElement", "visible")
.addTo(controller);

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

Принцип работы offset

  • Положительное значение (offset: 100) сдвигает триггер вниз, то есть сцена активируется позже.
  • Отрицательное значение (offset: -50) сдвигает триггер вверх, сцена активируется раньше.
  • Смещение учитывается относительно верхнего края окна или верхней границы прокручиваемого контейнера, если используется кастомный контейнер (container в ScrollMagic).

Влияние на сцены с duration

Если у сцены задан duration — длина, на протяжении которой сцена активна, смещение offset не влияет на длину анимации, а лишь изменяет стартовую точку.

var scene = new ScrollMagic.Scene({
    triggerElement: "#myElement",
    offset: 50,
    duration: 300
})
.setTween("#myElement", {opacity: 1})
.addTo(controller);

Сцена начнется через 50 пикселей прокрутки, а анимация будет продолжаться на протяжении 300 пикселей.

Использование offset с динамическими триггерами

Свойство offset поддерживает динамические значения, что позволяет подстраивать точку срабатывания под размеры элементов, высоту окна или другие условия:

var scene = new ScrollMagic.Scene({
    triggerElement: "#myElement",
    offset: window.innerHeight / 2
})
.setClassToggle("#myElement", "halfway")
.addTo(controller);

В этом случае триггер сработает, когда элемент достигнет середины видимой области окна.

Практические сценарии применения

  1. Анимация при частичном появлении элемента Для элементов, которые должны анимироваться, когда видна только часть контента:

    offset: -50 // начало анимации за 50px до верхнего края окна

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

  3. Поддержка адаптивного дизайна С динамическим расчетом через window.innerHeight или пропорции элементов можно адаптировать анимации под разные размеры экранов.

Частые ошибки при использовании offset

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

  • Смешение с triggerHook triggerHook определяет относительное положение триггера на экране (от 0 до 1). offset добавляется к вычисленной позиции триггера, что иногда вызывает неожиданные эффекты при некорректном сочетании значений.

  • Неправильный знак смещения Положительное значение сдвигает вниз, отрицательное — вверх. Ошибки часто возникают при попытке «опередить» сцену положительным offset.

Советы по оптимизации

  • Для последовательных анимаций использовать фиксированные смещения, чтобы визуальные эффекты выглядели плавно и согласованно.
  • Проверять сцены на разных разрешениях экрана, особенно если используются динамические значения offset.
  • Использовать console.log(scene.triggerPosition()) для отладки позиции триггера с учетом смещения.

Свойство offset в ScrollMagic является ключевым инструментом для тонкой настройки момента активации анимаций. Правильное использование позволяет создавать сложные визуальные эффекты без необходимости изменять разметку или переписывать логику анимаций.

Оглавление