Глобальный и локальный контроллеры

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

Глобальный контроллер

Глобальный контроллер — это единый объект ScrollMagic.Controller, который управляет всеми сценами на странице. Он создаётся один раз и используется повсеместно.

var controller = new ScrollMagic.Controller();

Преимущества глобального контроллера

  • Централизованное управление всеми сценами.
  • Упрощение логики для больших проектов, где сцены разделены по секциям, но должны синхронизироваться.
  • Меньше затрат на память, так как создаётся один объект контроллера.

Использование с сценами

var scene1 = new ScrollMagic.Scene({
    triggerElement: "#section1",
    duration: 300
})
.setTween("#animate1", {opacity: 1, y: 0})
.addTo(controller);

var scene2 = new ScrollMagic.Scene({
    triggerElement: "#section2",
    duration: 400
})
.setTween("#animate2", {scale: 1.2})
.addTo(controller);

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

controller.update(true);

Локальный контроллер

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

var localController = new ScrollMagic.Controller({
    container: "#scroll-container"
});

Отличительные особенности

  • Работает с внутренней прокруткой элементов, а не всей страницы.
  • Идеален для модальных окон, слайдеров или кастомных скролл-контейнеров.
  • Позволяет создавать независимые анимации без влияния на глобальный скролл.

Пример сцены с локальным контроллером

var localScene = new ScrollMagic.Scene({
    triggerElement: ".local-trigger",
    duration: 200
})
.setTween(".local-animate", {x: 100})
.addTo(localController);

В этом случае анимация реагирует только на прокрутку внутри #scroll-container, а не всей страницы.

Ключевые свойства и методы

Настройка контроллера

  • vertical — направление скролла (true по умолчанию для вертикального).
  • container — DOM-элемент, за которым контроллер будет следить.
  • globalSceneOptions — объект с параметрами по умолчанию для всех сцен, добавленных к контроллеру.
var controller = new ScrollMagic.Controller({
    vertical: true,
    container: "#scroll-container",
    globalSceneOptions: {triggerHook: 0.5}
});

Управление сценами

  • .addTo(controller) — привязка сцены к конкретному контроллеру.
  • .removeScene(scene) — удаление сцены из контроллера.
  • controller.update(force) — принудительное обновление всех сцен.

Когда использовать глобальный контроллер

  • На страницах с линейной прокруткой и большим количеством анимаций.
  • Если все сцены должны синхронизироваться по общей прокрутке.
  • Для упрощения управления событиями enter, leave, progress.

Когда использовать локальный контроллер

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

Комбинирование глобальных и локальных контроллеров

В крупных интерфейсах часто применяют оба подхода одновременно:

var mainController = new ScrollMagic.Controller();
var sectionController = new ScrollMagic.Controller({container: "#section-scroll"});

var globalScene = new ScrollMagic.Scene({
    triggerElement: "#global",
    duration: 500
}).setTween("#global-animate", {opacity: 1}).addTo(mainController);

var localScene = new ScrollMagic.Scene({
    triggerElement: ".section-trigger",
    duration: 300
}).setTween(".section-animate", {y: -50}).addTo(sectionController);

Такой подход позволяет:

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

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

  1. Для простых страниц достаточно одного глобального контроллера.
  2. Для сложных интерфейсов с множеством прокручиваемых контейнеров лучше создать отдельные локальные контроллеры.
  3. Использовать controller.update(true) после динамического изменения DOM, чтобы анимации корректно пересчитались.
  4. При комбинировании глобальных и локальных контроллеров следить, чтобы сцены не пересекались по элементам, иначе могут возникнуть конфликты анимаций.

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

Оглавление