Расчет длительности

В библиотеке ScrollMagic параметр duration определяет, на каком протяжении прокрутки активна сцена. Это один из ключевых элементов, формирующих поведение анимаций и закреплённых элементов.

Если duration равен 0, сцена срабатывает мгновенно в точке trigger и сразу же завершается. При положительном значении сцена остаётся активной на протяжении заданного расстояния прокрутки.

new ScrollMagic.Scene({
  duration: 300
});

В данном примере сцена будет активна на протяжении 300 пикселей прокрутки.

Единицы измерения длительности

ScrollMagic поддерживает несколько способов задания длительности:

1. Фиксированное значение (в пикселях)

duration: 500

Сцена длится ровно 500px скролла независимо от размеров окна или контента.

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

  • Предсказуемое поведение
  • Подходит для статических макетов
  • Не адаптируется под разные экраны

2. Процент от высоты контейнера

duration: "100%"

Значение вычисляется относительно высоты контейнера (обычно viewport).

Примеры:

  • "50%" — половина высоты окна
  • "200%" — двойная высота окна

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

  • Адаптивность
  • Удобство для полноэкранных секций
  • Зависимость от размера окна

3. Функция (динамическая длительность)

duration: function () {
  return window.innerHeight * 0.75;
}

Позволяет вычислять длительность в реальном времени.

Преимущества:

  • Полная гибкость
  • Возможность учитывать любые параметры (ширину, высоту, состояние DOM)
  • Пересчёт при ресайзе (если используется refresh)

Влияние длительности на поведение сцены

1. Управление прогрессом анимации

Если сцена связана с анимацией (например, через GSAP), длительность определяет диапазон, в котором меняется прогресс:

scene.setTween(tween);
  • В начале duration → прогресс = 0
  • В конце duration → прогресс = 1

Чем больше duration, тем медленнее развивается анимация.

2. Закрепление элементов (pin)

scene.setPin(".element");

Duration определяет, как долго элемент остаётся закреплённым:

  • duration: 0 → мгновенный pin/unpin
  • duration: 500 → элемент закреплён на 500px скролла

3. Поведение классов

scene.setClassToggle(".block", "active");

Класс будет добавлен на всё время действия сцены, то есть на протяжении duration.

Расчёт длительности относительно контента

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

duration: document.querySelector(".content").offsetHeight

Применение:

  • Скролл-анимации, синхронизированные с текстом
  • Эффекты параллакса
  • Лонгриды

Адаптивный расчёт длительности

Для корректной работы на разных устройствах используется динамический подход:

duration: function () {
  return document.querySelector(".section").offsetHeight;
}

В сочетании с автоматическим обновлением:

controller = new ScrollMagic.Controller({
  refreshInterval: 100
});

или ручным:

scene.refresh();

Связь длительности и триггеров

Длительность всегда отсчитывается от точки trigger:

new ScrollMagic.Scene({
  triggerElement: "#trigger",
  duration: 400
});

Схема:

[trigger] ---- 400px ---- [конец сцены]

Комбинирование с triggerHook

triggerHook: 0.5
  • Определяет позицию триггера во viewport
  • Duration начинает отсчёт именно от этой точки

Пример:

new ScrollMagic.Scene({
  triggerElement: "#block",
  triggerHook: 0.5,
  duration: "100%"
});

Частые ошибки при расчёте длительности

1. Неправильная работа при изменении размеров окна

Если используется фиксированная длительность:

duration: 500

она не адаптируется под новые размеры.

Решение: использовать функцию или проценты.

2. Использование offsetHeight до загрузки контента

Если DOM ещё не полностью отрисован:

duration: element.offsetHeight

значение может быть некорректным.

Решение:

  • Инициализация после загрузки (DOMContentLoaded или load)
  • Использование функции

3. Нулевая длительность там, где требуется плавность

duration: 0

Приводит к:

  • Резкому переключению
  • Отсутствию анимационного перехода

Практические шаблоны расчёта

Полноэкранная секция

duration: "100%"

Синхронизация с высотой контента

duration: function () {
  return document.querySelector(".text").scrollHeight;
}

Параллакс-эффект

duration: "200%"

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

Закрепление блока на время прокрутки секции

duration: function () {
  return document.querySelector(".section").offsetHeight;
}

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

При последовательных сценах важно учитывать их длительность:

scene1.duration(300);
scene2.duration(500);

Если сцены накладываются:

  • Поведение может пересекаться
  • Анимации могут конфликтовать

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

  • Избегать слишком больших duration без необходимости
  • Использовать функции только при необходимости
  • Минимизировать частые пересчёты

Отладка длительности

Для визуализации используется индикатор:

scene.addIndicators();

Позволяет увидеть:

  • начало сцены
  • конец сцены
  • текущий прогресс

Итоговые принципы расчёта

  • Длительность определяет «жизненный цикл» сцены при прокрутке

  • Выбор единиц зависит от задачи:

    • пиксели — точность
    • проценты — адаптивность
    • функция — гибкость

  • Длительность напрямую влияет на:

    • скорость анимации
    • время закрепления элементов
    • поведение классов

  • Правильный расчёт обеспечивает плавность и предсказуемость взаимодействия

Оглавление