Автовоспроизведение при входе в сцену

В ScrollMagic ключевым понятием является сцена (Scene), которая связывает анимацию или действие с положением скролла на странице. Автовоспроизведение контента при входе элемента в область видимости реализуется через привязку анимации к событию enter сцены.

var controller = new ScrollMagic.Controller();

var scene = new ScrollMagic.Scene({
    triggerElement: "#trigger", // элемент, при достижении которого запускается действие
    triggerHook: 0.8            // точка срабатывания (от верхнего края окна)
})
.on("enter", function () {
    // действие, которое выполняется при входе элемента в сцену
    document.querySelector("#box").classList.add("active");
})
.addTo(controller);

Здесь ключевые моменты:

  • triggerElement — элемент DOM, при пересечении которого срабатывает событие.
  • triggerHook — положение на экране, где происходит триггер (0 — верх окна, 1 — низ).
  • Событие enter активируется один раз при пересечении точки триггера снизу вверх.

Автовоспроизведение анимаций с GSAP

Часто ScrollMagic используют вместе с библиотекой GSAP для анимаций. Автовоспроизведение при входе в сцену выполняется с помощью привязки таймлайна к событию enter:

var tween = gsap.to("#box", {duration: 1, x: 300, opacity: 1});

var scene = new ScrollMagic.Scene({
    triggerElement: "#trigger",
    triggerHook: 0.9,
    reverse: false // отключение возврата анимации при скролле вверх
})
.setTween(tween)
.addTo(controller);

Параметр reverse: false гарантирует, что анимация сработает только один раз при входе в сцену, что идеально для автовоспроизведения видео или элементов с анимацией.

Автовоспроизведение видео

Для воспроизведения видеоконтента достаточно в обработчике события enter вызвать метод play():

var video = document.querySelector("#videoElement");

var scene = new ScrollMagic.Scene({
    triggerElement: "#videoTrigger",
    triggerHook: 0.75,
    reverse: false
})
.on("enter", function () {
    video.play();
})
.addTo(controller);

Если видео должно останавливаться при выходе из сцены, можно использовать событие leave:

scene.on("leave", function () {
    video.pause();
});

Использование Pin для фиксированного положения

Иногда требуется, чтобы элемент оставался закреплённым на экране и воспроизводился по мере прокрутки. Для этого применяют метод .setPin():

var scene = new ScrollMagic.Scene({
    triggerElement: "#pinTrigger",
    duration: 500
})
.setPin("#pinnedElement")
.on("enter", function () {
    document.querySelector("#pinnedElement").classList.add("play");
})
.addTo(controller);

Здесь duration определяет время фиксации элемента на экране в пикселях. Автовоспроизведение или запуск анимации может происходить как при входе, так и постепенно в процессе скролла.

Управление повторным воспроизведением

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

var scene = new ScrollMagic.Scene({
    triggerElement: "#repeatTrigger",
    triggerHook: 0.8,
    reverse: true // анимация может повторяться при скролле вверх
})
.on("enter", function () {
    var element = document.querySelector("#repeatElement");
    element.classList.add("active");
})
.on("leave", function () {
    document.querySelector("#repeatElement").classList.remove("active");
})
.addTo(controller);
  • reverse: true — анимация сбрасывается при выходе из сцены.
  • Использование leave позволяет возвратить элемент в исходное состояние, чтобы при следующем входе воспроизведение происходило снова.

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

  1. Минимизировать heavy DOM операции в обработчике enter, чтобы скролл оставался плавным.
  2. Использовать reverse: false для автовоспроизведения медиа и однократных анимаций.
  3. Комбинировать с GSAP Timeline для сложных цепочек анимаций, синхронизированных со скроллом.
  4. Следить за triggerHook — положение триггера напрямую влияет на момент старта воспроизведения.

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

Оглавление