Инструменты разработчика

Для использования ScrollMagic необходимо подключить саму библиотеку и её зависимости. Основным зависимым компонентом является GSAP (GreenSock Animation Platform) при работе с анимациями, хотя базовый функционал ScrollMagic может работать и без него. Подключение производится через <script> или через менеджеры пакетов вроде npm:

<!-- ScrollMagic core -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js"></script>
<!-- GSAP для анимаций -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<!-- Плагин ScrollMagic для работы с GSAP -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/animation.gsap.min.js"></script>

Через npm:

npm install scrollmagic gsap

Подключение через модульный подход:

import ScrollMagic from "scrollmagic";
import { gsap } from "gsap";
import "scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap";

Основные компоненты ScrollMagic

1. Контроллер (Controller) Контроллер — это центр управления сценами. Он отслеживает скролл и синхронизирует события на странице. Создание контроллера:

const controller = new ScrollMagic.Controller({
  globalSceneOptions: { triggerHook: 0.5 } // настройка поведения всех сцен по умолчанию
});

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

2. Сцена (Scene) Сцена — это объект, который описывает поведение при скролле: когда оно запускается, какая анимация применяется и когда останавливается.

const scene = new ScrollMagic.Scene({
  triggerElement: "#section1",  // элемент, при котором срабатывает сцена
  duration: 200,                // длительность эффекта в пикселях прокрутки
  offset: 50                     // смещение относительно начала элемента
})
.setTween("#animateElement", {opacity: 1, y: -50}) // анимация через GSAP
.addIndicators({name: "scene 1"})                  // отладочные индикаторы
.addTo(controller);                                // привязка к контроллеру

Ключевые свойства сцены:

  • triggerElement — DOM-элемент, с которого начинается сцена.
  • duration — длина сцены в пикселях. При duration: 0 сцена срабатывает один раз.
  • offset — смещение точки триггера.
  • triggerHook — точка срабатывания на экране (0 — верх, 1 — низ, 0.5 — середина).

3. Триггер и триггер-хуки Триггер указывает, где на странице начинается действие сцены. Можно использовать triggerHook в числовом формате или строками 'onEnter', 'onCenter', 'onLeave'.

triggerHook: 0      // срабатывает, когда верх элемента касается верхней границы окна
triggerHook: 0.5    // срабатывает в центре экрана
triggerHook: 1      // срабатывает при достижении нижней границы окна

Инструменты разработчика

ScrollMagic предоставляет встроенный инструмент для отладки — индикаторы сцены. Они визуализируют точки триггеров, длину сцены и направление анимации. Для их подключения:

scene.addIndicators({name: "my scene", colorStart: "#FF0000", colorEnd: "#00FF00"});

Параметры индикатора:

  • name — подпись для индикатора.
  • colorStart и colorEnd — цвета для начала и конца сцены.
  • indent — смещение от левого края окна.

Индикаторы не влияют на анимацию и полезны при отладке сложных последовательностей.

Продвинутые инструменты: динамическое управление сценами

1. Удаление сцены

scene.destroy(true); // true — удаляет также привязку к DOM

2. Остановка и возобновление сцены

scene.enabled(false); // отключает сцену
scene.enabled(true);  // включает обратно

3. Изменение параметров сцены на лету

scene.duration(400); // меняет длину сцены
scene.offset(100);   // меняет смещение триггера

4. Группировка сцен Сцены можно объединять в массивы и управлять ими циклически, что удобно при сложных скролл-анимациях:

const scenes = [];
document.querySelectorAll('.section').forEach((section, i) => {
  const s = new ScrollMagic.Scene({triggerElement: section})
    .setTween(section, {opacity: 1, y: -30})
    .addTo(controller);
  scenes.push(s);
});

Работа с анимациями GSAP

ScrollMagic тесно интегрируется с GSAP. Основные функции:

  • setTween — назначает анимацию для сцены.
  • setClassToggle — добавляет или убирает CSS-класс при активации сцены.

Примеры:

// Анимация через GSAP
scene.setTween(gsap.to("#box", {duration: 1, x: 100, rotation: 360}));

// Изменение классов
scene.setClassToggle("#box", "active");

Можно комбинировать анимации, создавать цепочки с помощью Timeline GSAP:

const tl = gsap.timeline();
tl.to("#box", {x: 100, duration: 1})
  .to("#box", {y: 50, duration: 1})
  .to("#box", {opacity: 0, duration: 0.5});

scene.setTween(tl);

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

  • Использовать минимальное количество сцен. Каждая сцена — отдельный слушатель скролла.
  • Для тяжелых анимаций применять transform и opacity вместо изменения top, left или margin.
  • Отключать сцены вне экрана: scene.enabled(false) для экономии ресурсов.
  • Использовать индикаторы только на этапе разработки.

Интеграция с современными фреймворками

ScrollMagic хорошо работает с React, Vue и Angular, но важно управлять жизненным циклом компонентов, чтобы сцены создавались при монтировании и удалялись при размонтировании. Пример для React:

useEffect(() => {
  const controller = new ScrollMagic.Controller();
  const scene = new ScrollMagic.Scene({triggerElement: "#section"})
    .setClassToggle("#box", "visible")
    .addTo(controller);

  return () => {
    scene.destroy(true);
    controller.destroy(true);
  };
}, []);

Этот подход предотвращает утечки памяти и конфликты при повторной инициализации.

Итоговые возможности инструментов разработчика

  • Отладка сцен через индикаторы.
  • Динамическое изменение параметров и управление состоянием сцены.
  • Создание комплексных анимационных последовательностей с Timeline GSAP.
  • Оптимизация производительности через включение/выключение сцен и минимизацию DOM-операций.

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

Оглавление