Длительность относительно элемента

В ScrollMagic длительность сцены определяется свойством duration, которое указывает, на какой длине прокрутки будет происходить действие сцены. Значение duration может быть задано как в пикселях, так и в процентах от высоты целевого элемента. Если duration не указана, по умолчанию сцена считается “instant”, то есть эффект срабатывает в момент пересечения триггерного элемента без плавной анимации.

var scene = new ScrollMagic.Scene({
    triggerElement: "#trigger",
    duration: 300 // длительность сцены в пикселях
})
.setTween("#animate", {opacity: 1})
.addTo(controller);

В этом примере анимация изменяет прозрачность элемента на протяжении 300 пикселей прокрутки.

Задание длительности относительно элемента

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

var scene = new ScrollMagic.Scene({
    triggerElement: "#trigger",
    duration: function() {
        return document.querySelector("#target").offsetHeight;
    }
})
.setTween("#animate", {y: 200})
.addTo(controller);
  • duration может быть функцией, которая возвращает динамическое значение.
  • offsetHeight возвращает высоту элемента в пикселях.
  • При изменении размеров окна сцена автоматически пересчитывает длительность при вызове метода scene.refresh().

Процентная длительность

Для создания пропорциональной анимации часто используется длительность в процентах от высоты элемента. ScrollMagic позволяет это реализовать через вычисление высоты элемента и умножение на коэффициент:

var scene = new ScrollMagic.Scene({
    triggerElement: "#trigger",
    duration: document.querySelector("#target").offsetHeight * 0.75
})
.setTween("#animate", {scale: 1.5})
.addTo(controller);

В этом примере сцена длится 75% высоты элемента #target, что делает анимацию гибкой при изменении размеров окна.

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

В случаях, когда высота элемента меняется после загрузки страницы (например, из-за асинхронного контента), необходимо обновлять длительность сцены:

window.addEventListener("resize", function() {
    scene.duration(document.querySelector("#target").offsetHeight);
});
  • Метод scene.duration() позволяет установить новую длительность после создания сцены.
  • Использование обработчика события resize гарантирует корректное поведение при адаптивной верстке.

Особенности при использовании duration с Tween

Если сцена привязана к анимации Tween, длительность сцены определяет время прогресса анимации. Принципы работы:

  • Длительная сцена → плавная анимация на всей длине прокрутки.
  • Короткая сцена → анимация быстро достигает конечного состояния.
  • Tween автоматически синхронизируется с прогрессом сцены, используя progress от 0 до 1.
var tween = gsap.to("#animate", {x: 300, rotation: 360, ease: "linear"});
var scene = new ScrollMagic.Scene({
    triggerElement: "#trigger",
    duration: 500
})
.setTween(tween)
.addTo(controller);

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

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

  2. Пошаговые анимации Разбивка длинной сцены на несколько частей с разными Tween позволяет создавать цепочку анимаций.

  3. Пропорциональная адаптивная анимация Использование функции duration с вычислением высоты элемента делает анимацию одинаково корректной на мобильных и десктопах.

Важные методы для управления длительностью

  • scene.duration(value) — задаёт новую длительность или возвращает текущую.
  • scene.refresh() — пересчитывает длительность сцены и положения триггеров, необходим при изменении контента.
  • scene.triggerHook(value) — определяет, где на экране триггер активирует сцену, важно согласовывать с длительностью.
scene.duration(function() {
    return document.querySelector("#dynamic").scrollHeight;
});
scene.refresh();

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

Вывод

Длительность сцены в ScrollMagic — это ключевой параметр для контроля анимации, который может быть как фиксированным, так и динамическим, основанным на высоте элементов. Правильное использование функций duration, совместно с обновлением через refresh(), позволяет создавать плавные, адаптивные и точно синхронизированные эффекты при прокрутке.

Оглавление