Настройка окружения разработки

Для начала работы с ScrollMagic необходимо подключить библиотеку и обеспечить корректное окружение для разработки. Библиотека ScrollMagic распространяется через CDN и npm. Наиболее удобный способ интеграции в современный проект — через npm:

npm install scrollmagic

Если проект использует сборщик модулей (Webpack, Parcel, Vite), ScrollMagic можно импортировать напрямую:

import ScrollMagic from 'scrollmagic';

Для использования дополнительных плагинов, таких как анимации с GSAP, необходимо установить соответствующие зависимости:

npm install gsap

И подключить их:

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

При подключении через CDN достаточно добавить скрипты в HTML:

<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/animation.gsap.min.js"></script>

Структура проекта

Для корректного использования ScrollMagic рекомендуется поддерживать минимально необходимую структуру проекта:

project/
├─ index.html
├─ js/
│  ├─ main.js
├─ css/
│  ├─ style.css
  • index.html — основной HTML-файл с разметкой для сцен и триггеров.
  • js/main.js — файл с инициализацией ScrollMagic и логикой анимаций.
  • css/style.css — стили для элементов, участвующих в анимации.

Поддержка современного синтаксиса ES6 и модулей облегчает импорт ScrollMagic и GSAP, а также интеграцию с другими библиотеками.

Подключение и инициализация контроллера

Основной объект ScrollMagic — Controller. Контроллер отслеживает прокрутку страницы и управляет всеми сценами:

const controller = new ScrollMagic.Controller();

Ключевые моменты при инициализации контроллера:

  • Можно создавать несколько контроллеров для разных областей прокрутки.
  • Контроллер можно настраивать через опции:
const controller = new ScrollMagic.Controller({
    globalSceneOptions: { triggerHook: 0.5 }, // по умолчанию сцена срабатывает на середине экрана
    loglevel: 3, // уровень логирования (0-3)
});
  • triggerHook определяет точку на экране, где срабатывает сцена. Значение от 0 (верх экрана) до 1 (низ экрана).

Создание сцены

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

const scene = new ScrollMagic.Scene({
    triggerElement: '#myElement', // элемент, с которого начинается сцена
    duration: 200,                 // длительность сцены в пикселях
    offset: 50,                    // смещение начала сцены от триггера
    triggerHook: 0.8               // точка срабатывания сцены на экране
})
.setClassToggle('#myElement', 'active') // добавление класса при срабатывании сцены
.addTo(controller);                     // привязка сцены к контроллеру

Основные параметры сцены:

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

Интеграция с GSAP

Для плавных анимаций лучше использовать GSAP. ScrollMagic предоставляет плагин animation.gsap, который связывает сцены с таймлайнами GSAP:

const tween = gsap.to('#myElement', { duration: 1, x: 300, opacity: 0.5 });

const scene = new ScrollMagic.Scene({
    triggerElement: '#myElement',
    duration: 400
})
.setTween(tween)
.addTo(controller);

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

  • Анимации можно создавать с помощью gsap.to, gsap.from, gsap.fromTo.
  • ScrollMagic автоматически прогрессирует анимацию пропорционально прокрутке сцены.
  • Таймлайны GSAP (gsap.timeline) позволяют комбинировать несколько анимаций в одной сцене.

Настройка дебага

Для отладки удобно включать индикаторы сцен:

scene.addIndicators({
    name: "scene 1",
    colorStart: "#ff0000",
    colorEnd: "#00ff00",
    indent: 10
});
  • Индикаторы помогают визуально видеть триггеры и длительность сцены.
  • В production рекомендуется удалять или отключать индикаторы для производительности.

Рекомендации по окружению разработки

  • Использовать современный браузер с поддержкой ES6.
  • Настроить локальный сервер (Live Server или Vite) для корректной работы модулей.
  • Подключать GSAP и ScrollMagic через npm и ES6-модули для масштабируемости.
  • Стили для анимаций лучше задавать через CSS, а динамические свойства через GSAP.
  • Разделять логику сцен по функциональности для удобного сопровождения кода.

Практическая организация кода

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

js/
├─ controllers.js   // инициализация ScrollMagic.Controller
├─ scenes.js        // создание всех сцен
├─ animations.js    // функции анимаций GSAP

Пример:

import { controller } from './controllers';
import { initScenes } from './scenes';

document.addEventListener('DOMContentLoaded', () => {
    initScenes(controller);
});

Такой подход упрощает поддержку и масштабирование проекта с большим количеством анимаций.

Оглавление