Переиспользуемые компоненты

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

Концепция сцены и контроллера

В ScrollMagic центральными объектами являются Controller и Scene.

  • Controller — управляет всеми сценами, обеспечивает синхронизацию с прокруткой страницы.
  • Scene — описывает конкретное событие прокрутки и действия, которое должно происходить.

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

Пример базового контроллера:

const controller = new ScrollMagic.Controller();

Создание сцены для одного блока:

const scene = new ScrollMagic.Scene({
    triggerElement: "#section1",
    duration: 300,
    triggerHook: 0.5
})
.setClassToggle("#section1", "visible")
.addTo(controller);

Абстракция повторяющихся сцен

Для переиспользуемости сцены оформляются в виде функций или классов, принимающих параметры, которые изменяются от блока к блоку.

Пример функции для анимации появления элементов:

function createFadeInScene(elementSelector, duration = 200, triggerHook = 0.8) {
    return new ScrollMagic.Scene({
        triggerElement: elementSelector,
        duration: duration,
        triggerHook: triggerHook
    })
    .setClassToggle(elementSelector, "fade-in")
    .addTo(controller);
}

// Использование
createFadeInScene("#section1");
createFadeInScene("#section2", 400);

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

Переиспользуемые анимации с TweenMax / GSAP

ScrollMagic тесно интегрируется с библиотекой GSAP (TweenMax / TweenLite), что позволяет создавать анимации, которые также можно повторно использовать.

Создание универсального Tween:

function fadeUpAnimation(target, distance = 50, duration = 1) {
    return TweenMax.fromTo(target, duration,
        { y: distance, opacity: 0 },
        { y: 0, opacity: 1, ease: Power1.easeOut }
    );
}

Применение анимации к сцене:

function createAnimatedScene(elementSelector, tween) {
    return new ScrollMagic.Scene({
        triggerElement: elementSelector,
        triggerHook: 0.7
    })
    .setTween(tween)
    .addTo(controller);
}

// Создание сцены с повторно используемым Tween
const tween = fadeUpAnimation("#section1");
createAnimatedScene("#section1", tween);
createAnimatedScene("#section2", fadeUpAnimation("#section2", 80));

Такой подход позволяет хранить анимации отдельно от сцен и многоразово подключать их к различным элементам.

Динамическое создание сцен для коллекций элементов

Для страниц с большим количеством блоков полезно создавать сцены автоматически для всех элементов одной категории.

const elements = document.querySelectorAll(".animate-on-scroll");

elements.forEach(el => {
    const tween = fadeUpAnimation(el, 60);
    createAnimatedScene(el, tween);
});

Преимущество — массовая генерация сцен без дублирования кода, при этом каждая сцена остаётся независимой и настраиваемой.

Параметризация и настройка

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

const sectionsConfig = [
    { selector: "#section1", distance: 50, duration: 1, triggerHook: 0.8 },
    { selector: "#section2", distance: 70, duration: 1.2, triggerHook: 0.7 },
    { selector: "#section3", distance: 100, duration: 1, triggerHook: 0.9 }
];

sectionsConfig.forEach(cfg => {
    const tween = fadeUpAnimation(cfg.selector, cfg.distance, cfg.duration);
    new ScrollMagic.Scene({
        triggerElement: cfg.selector,
        triggerHook: cfg.triggerHook
    })
    .setTween(tween)
    .addTo(controller);
});

Такой подход делает код масштабируемым и легко редактируемым, позволяя добавлять новые блоки или изменять параметры без переписывания логики.

Комбинация классов и функций для компонента

Можно создать полноценный класс компонента, который объединяет создание Tween и Scene:

class ScrollComponent {
    constructor(selector, options = {}) {
        this.selector = selector;
        this.distance = options.distance || 50;
        this.duration = options.duration || 1;
        this.triggerHook = options.triggerHook || 0.8;
        this.init();
    }

    createTween() {
        return TweenMax.fromTo(this.selector, this.duration,
            { y: this.distance, opacity: 0 },
            { y: 0, opacity: 1, ease: Power1.easeOut }
        );
    }

    init() {
        const tween = this.createTween();
        new ScrollMagic.Scene({
            triggerElement: this.selector,
            triggerHook: this.triggerHook
        })
        .setTween(tween)
        .addTo(controller);
    }
}

// Использование
new ScrollComponent("#section1");
new ScrollComponent("#section2", { distance: 80, duration: 1.2 });

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

Итоговые принципы переиспользуемости

  1. Параметризовать сцены и анимации — использовать функции или конфигурационные объекты.
  2. Разделять Tween и Scene — анимации хранятся отдельно, что упрощает повторное использование.
  3. Использовать классы для компонентов — инкапсуляция логики, удобство масштабирования.
  4. Массовая генерация сцен — циклы и коллекции позволяют создавать сцены для множества элементов без дублирования.
  5. Гибкость конфигурации — возможность изменять параметры для отдельных блоков, не затрагивая общую структуру.

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

Оглавление