Установка через npm

ScrollMagic — это библиотека для управления анимациями при скролле, которая позволяет создавать динамичные и интерактивные веб-интерфейсы. Для работы с ней в современных проектах предпочтительно использовать пакетный менеджер npm, что упрощает управление зависимостями и интеграцию с сборщиками вроде Webpack или Vite.

Подключение ScrollMagic через npm

Для начала необходимо убедиться, что на проекте установлен Node.js и npm. Проверка версий осуществляется командами:

node -v
npm -v

После этого в директории проекта следует выполнить установку ScrollMagic:

npm install scrollmagic

Эта команда скачивает последнюю стабильную версию библиотеки и добавляет её в package.json в разделе dependencies.

Структура установки и зависимостей

После установки структура проекта с включением ScrollMagic обычно выглядит так:

project/
├─ node_modules/
│  ├─ scrollmagic/
├─ package.json
├─ src/
│  ├─ index.js

Файл package.json автоматически получает запись:

"dependencies": {
  "scrollmagic": "^2.0.8"
}

При необходимости можно указать конкретную версию:

npm install scrollmagic@2.0.7

Это гарантирует стабильность работы проекта при обновлениях библиотеки.

Импорт библиотеки в проект

Для работы с ScrollMagic в современном ES6-проекте необходимо импортировать основной класс и дополнительные плагины:

import ScrollMagic from "scrollmagic";
import "scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators.js"; 
import "scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js";
  • ScrollMagic — основной контроллер и сцены для анимации.
  • debug.addIndicators.js — плагин для отладки сцен, добавляющий визуальные индикаторы.
  • animation.gsap.js — интеграция с библиотекой GSAP для плавной анимации.

Для проектов на CommonJS можно использовать:

const ScrollMagic = require("scrollmagic");
require("scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators.js");
require("scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js");

Инициализация ScrollMagic

После подключения создается экземпляр контроллера:

const controller = new ScrollMagic.Controller();

Контроллер управляет всеми сценами (Scene) на странице и отвечает за отслеживание скролла.

Пример создания простой сцены:

const scene = new ScrollMagic.Scene({
    triggerElement: "#trigger", // элемент, при котором срабатывает анимация
    duration: 300,              // длительность эффекта в пикселях
    offset: 50                  // смещение триггера относительно элемента
})
.setClassToggle("#animate", "visible") // добавление CSS класса
.addTo(controller);                    // добавление сцены в контроллер

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

  • triggerElement — DOM-элемент, при появлении которого запускается сцена.
  • duration — длина сцены, измеряемая в пикселях прокрутки; 0 — мгновенное срабатывание.
  • offset — смещение начала сцены относительно triggerElement.
  • setClassToggle — удобный способ управления CSS-классами для анимации.

Настройка с использованием GSAP

ScrollMagic часто используется совместно с GSAP для сложных анимаций:

import { gsap } from "gsap";

const tween = gsap.to("#animate", { x: 300, rotation: 360, duration: 2 });

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

Здесь:

  • gsap.to создаёт анимацию перемещения и вращения.
  • setTween привязывает анимацию к сцене ScrollMagic.
  • addIndicators визуализирует начало, конец и активную область сцены, что упрощает отладку.

Настройки сборщиков и интеграция

Для корректной работы с Webpack или Vite следует учесть:

  1. ScrollMagic поставляется в виде ES5-модуля, поэтому при использовании современных сборщиков иногда требуется babel-loader для транспиляции.
  2. Плагины библиотеки не экспортируются автоматически, их нужно импортировать отдельно, как показано выше.
  3. При использовании TypeScript можно установить типы отдельно:
npm install --save-dev @types/scrollmagic

Проверка работы

После установки и импорта рекомендуется создать минимальный пример на странице:

<div id="trigger" style="margin-top: 200px;">Триггер</div>
<div id="animate" style="width:100px; height:100px; background:red;">Анимация</div>

При скролле элемент #animate должен получать класс visible или проигрывать GSAP-анимацию, если сцена настроена с setTween.

Оптимизация и рекомендации

  • Устанавливать ScrollMagic через npm позволяет легко обновлять библиотеку и управлять версиями.
  • Использование ES-модулей повышает совместимость с современными сборщиками и ускоряет загрузку страниц.
  • Подключение плагинов только по необходимости уменьшает размер сборки.
  • Для проектов с большим количеством сцен рекомендуется один контроллер на страницу, чтобы избежать лишней нагрузки на производительность.

Хотите, я подготовлю отдельный раздел с подробным примером сложной анимации ScrollMagic с GSAP, где будет несколько взаимодействующих сцен и индикаторов?

Оглавление