Безопасные зависимости

ScrollMagic — это библиотека для управления анимацией и поведением элементов на странице в зависимости от прокрутки. Она позволяет создавать сложные эффекты, такие как параллакс, появление элементов по скроллу, закрепление блоков и синхронизацию анимации с движением страницы. Основные элементы библиотеки:

  • Controller — центральный объект, управляющий всеми сценами.
  • Scene — отдельная сцена, которая описывает, что должно происходить с элементом при прокрутке.
  • Indicators — визуальные подсказки, используемые для отладки, показывающие начало и конец сцены.
// Создание контроллера
var controller = new ScrollMagic.Controller();

// Создание сцены
var scene = new ScrollMagic.Scene({
    triggerElement: "#trigger",  // Элемент, с которого начинается сцена
    duration: 300,               // Длина сцены в пикселях
    offset: 50                   // Смещение начала сцены
})
.setTween("#animate", {opacity: 1, y: 100})  // Анимация с помощью GSAP
.addIndicators({name: "fade scene"})        // Включение индикаторов
.addTo(controller);                          // Добавление сцены в контроллер

Управление анимацией через ScrollMagic

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

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

  • Tween — анимация, которая изменяет свойства элемента в течение сцены.
  • Для Tween используется объект GSAP:
var tween = gsap.to("#animate", {duration: 1, x: 200, opacity: 0.5});

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

Pinning — закрепление элемента

Pinning позволяет фиксировать элемент на экране во время прокрутки сцены.

var scene = new ScrollMagic.Scene({
    triggerElement: "#pin",
    duration: 400
})
.setPin("#pin")
.addTo(controller);

Ключевой момент: Pinning часто используется вместе с параллаксом, чтобы создать впечатление движения слоёв при скролле.

Расширенные возможности ScrollMagic

Группировка сцен

Сцены можно объединять для комплексного управления анимацией:

var scene1 = new ScrollMagic.Scene({triggerElement: "#one"}).setClassToggle("#box1", "active");
var scene2 = new ScrollMagic.Scene({triggerElement: "#two"}).setClassToggle("#box2", "active");

controller.addScene([scene1, scene2]);

Работа с событиями

ScrollMagic позволяет отслеживать события сцены:

scene.on("enter", function () {
    console.log("Элемент вошёл в зону видимости");
});

scene.on("leave", function () {
    console.log("Элемент покинул зону видимости");
});

Настройка триггеров

  • triggerElement — элемент, от которого считается начало сцены.
  • offset — смещение в пикселях.
  • duration — длина сцены, может быть числом или функцией, вычисляющей длину динамически.
var dynamicScene = new ScrollMagic.Scene({
    triggerElement: "#dynamic",
    duration: function() { return document.querySelector("#dynamic").offsetHeight; }
});

Оптимизация и безопасность зависимостей

ScrollMagic зависит от GSAP или Velocity.js для анимаций. Безопасные зависимости включают:

  1. Проверку версий через package.json и использование фиксированных версий.
  2. Подключение через npm или yarn, избегая CDN для критических проектов.
  3. Регулярное обновление и проверку пакетов с помощью npm audit или yarn audit.
"dependencies": {
    "scrollmagic": "2.0.8",
    "gsap": "3.13.1"
}

Важные рекомендации

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

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

React

В React создаются сцены внутри эффекта useEffect для корректного управления жизненным циклом:

import { useEffect } from "react";
import ScrollMagic from "scrollmagic";
import { gsap } from "gsap";

function App() {
    useEffect(() => {
        const controller = new ScrollMagic.Controller();

        const tween = gsap.to("#box", {x: 100, opacity: 0.5});

        new ScrollMagic.Scene({triggerElement: "#trigger", duration: 300})
            .setTween(tween)
            .addTo(controller);

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

    return (
        <div>
            <div id="trigger">Trigger</div>
            <div id="box">Animate Me</div>
        </div>
    );
}

Vue.js

В Vue сцены создаются после рендеринга DOM:

mounted() {
    const controller = new ScrollMagic.Controller();
    const tween = gsap.to(this.$refs.box, {y: 200, opacity: 0.7});

    new ScrollMagic.Scene({triggerElement: this.$refs.trigger, duration: 400})
        .setTween(tween)
        .addTo(controller);
}

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

Советы по производительности

  • Ограничивать количество активных сцен, особенно с длительным duration.
  • Использовать .setClassToggle() вместо Tween для лёгких изменений стилей.
  • Удалять сцены и контроллеры при смене страниц в SPA.
  • Проверять FPS и время рендеринга при использовании сложных анимаций и Pinning.
Оглавление