Временная шкала и ScrollMagic

ScrollMagic — это мощная библиотека для управления анимациями на основе прокрутки. Основная идея заключается в том, чтобы связать событие прокрутки страницы с определёнными действиями, например, запуском анимации, изменением стилей или управлением видео. Центральным элементом этой библиотеки является Timeline (временная шкала), которая позволяет координировать последовательность анимаций и связывать их с конкретными участками страницы.

В ScrollMagic временная шкала реализуется через интеграцию с библиотекой GSAP (GreenSock Animation Platform). Каждая анимация в Timeline может быть привязана к конкретной позиции прокрутки, а последовательность анимаций строится с точностью до миллисекунд.

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

Основной строительный блок ScrollMagic — это Scene. Сцена определяет, когда и как происходит анимация на основе прокрутки.

// Создание контроллера ScrollMagic
var controller = new ScrollMagic.Controller();

// Создание сцены
var scene = new ScrollMagic.Scene({
    triggerElement: "#section1", // Элемент, с которого начинается сцена
    duration: 500,               // Длина сцены в пикселях прокрутки
    triggerHook: 0.5             // Позиция триггера (0 — верх, 1 — низ)
})
.setTween("#animateBox", {x: 200, opacity: 1}) // Связываем анимацию с элементом
.addTo(controller);                            // Добавляем сцену в контроллер

Ключевые моменты:

  • triggerElement определяет, с какого элемента начинается сцена.
  • duration задаёт длину прокрутки, в течение которой анимация активна.
  • triggerHook контролирует положение триггера относительно окна просмотра.

Использование Timeline для сложных анимаций

Для создания сложной последовательности анимаций применяются Timeline объекты GSAP. Timeline позволяет объединять несколько анимаций в единую цепочку, которую можно синхронизировать с прокруткой через ScrollMagic.

var tl = gsap.timeline();
tl.to("#box1", {x: 100, duration: 1})
  .to("#box2", {y: 150, duration: 1})
  .to("#box3", {opacity: 0, duration: 1});

var scene = new ScrollMagic.Scene({
    triggerElement: "#timelineSection",
    duration: 1000,
    triggerHook: 0.2
})
.setTween(tl)
.addTo(controller);

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

  • Анимации выполняются последовательно, если не указаны абсолютные временные позиции.
  • Возможность управлять анимацией через прокрутку обеспечивает плавное прогрессирование сцены.
  • Можно использовать методы .from(), .to(), .fromTo() для разных типов анимаций.

Параметры сцены для временной шкалы

ScrollMagic предоставляет гибкие настройки для управления сценой:

  • offset — смещение триггера относительно элемента.
  • reverse — разрешение или запрет обратного воспроизведения анимации при прокрутке вверх.
  • loglevel — уровень логирования для отладки сцен.

Пример с дополнительными параметрами:

var scene = new ScrollMagic.Scene({
    triggerElement: "#advanced",
    duration: 800,
    triggerHook: 0.3,
    offset: 100,
    reverse: true
})
.setTween(tl)
.addIndicators({name: "Timeline Scene"}) // Используется для отладки
.addTo(controller);

Использование индикаторов (addIndicators) особенно полезно при создании сложных временных шкал, позволяя визуально контролировать позиции начала и конца сцены.

Синхронизация нескольких временных шкал

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

var tl1 = gsap.timeline();
tl1.to("#header", {y: 50, opacity: 1, duration: 1});

var tl2 = gsap.timeline();
tl2.to("#content", {x: -200, duration: 1});

new ScrollMagic.Scene({
    triggerElement: "#sectionHeader",
    duration: 500
})
.setTween(tl1)
.addTo(controller);

new ScrollMagic.Scene({
    triggerElement: "#sectionContent",
    duration: 700
})
.setTween(tl2)
.addTo(controller);

Преимущества подхода:

  • Полная независимость анимаций между секциями.
  • Возможность легко масштабировать проект, добавляя новые Timeline.
  • Контроль над каждой сценой отдельно с возможностью изменения параметров duration, triggerHook и offset.

Параллакс и временная шкала

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

var parallaxTl = gsap.timeline();
parallaxTl.to("#bg", {y: -100, ease: "linear"})
            .to("#fg", {y: 50, ease: "linear"}, 0);

new ScrollMagic.Scene({
    triggerElement: "#parallaxSection",
    duration: 1000
})
.setTween(parallaxTl)
.addTo(controller);

Особенности параллакса с Timeline:

  • Несколько элементов можно анимировать синхронно.
  • Устанавливается точное время начала и конца каждой анимации.
  • Прокрутка страницы становится управляющим фактором всей анимации.

Динамическое управление временной шкалой

ScrollMagic позволяет динамически изменять Timeline и сцены после их создания:

// Изменение длительности сцены
scene.duration(1200);

// Изменение анимации на лету
scene.setTween(gsap.to("#box1", {x: 300, duration: 2}));

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

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

Оглавление