Анимация масштаба

Для реализации анимации масштаба элементов в ScrollMagic используются сцены (Scene) и триггеры (triggerElement), которые задают момент начала анимации при прокрутке страницы. Основная идея заключается в том, чтобы привязать изменение CSS-свойства transform: scale() к прогрессу прокрутки.

Создание сцены и контроллера

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

var controller = new ScrollMagic.Controller();

Далее создается сцена для конкретного элемента:

var scene = new ScrollMagic.Scene({
    triggerElement: "#scaleElement", // элемент, который будет триггером
    duration: 500, // длительность анимации в пикселях прокрутки
    triggerHook: 0.5 // момент на экране, где начнется сцена (0 – верх, 1 – низ)
});

Подключение анимации через TweenMax / GSAP

Для плавной анимации масштаба чаще всего используется библиотека GSAP. Например, можно увеличить элемент в 1.5 раза:

var tween = gsap.to("#scaleElement", {scale: 1.5, duration: 1, ease: "power1.inOut"});

scene.setTween(tween);
controller.addScene(scene);

Ключевые моменты здесь:

  • scale — задает коэффициент увеличения или уменьшения.
  • duration — определяет длину анимации по времени (в контексте GSAP, но ScrollMagic будет управлять прогрессом по прокрутке).
  • ease — функция сглаживания, которая делает анимацию плавной.

Настройка прогресса анимации

ScrollMagic автоматически управляет прогрессом tween по прокрутке. Можно отслеживать прогресс с помощью события progress:

scene.on("progress", function(event) {
    console.log("Progress: " + event.progress);
});

event.progress принимает значения от 0 до 1 и позволяет создавать динамические эффекты в зависимости от степени прокрутки.

Использование обратного эффекта (reverse)

По умолчанию сцена ScrollMagic поддерживает обратное воспроизведение:

scene.reverse(true);

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

Множественные элементы

Для одновременной анимации нескольких элементов можно создать несколько сцен:

gsap.utils.toArray(".scaleElements").forEach(function(elem) {
    var tween = gsap.to(elem, {scale: 2, duration: 1, ease: "power2.out"});
    var scene = new ScrollMagic.Scene({
        triggerElement: elem,
        duration: 400,
        triggerHook: 0.6
    })
    .setTween(tween)
    .addTo(controller);
});

Использование gsap.utils.toArray позволяет избежать ручного дублирования кода и автоматически создавать сцены для всех элементов с классом .scaleElements.

Комбинирование с другими анимациями

Анимацию масштаба можно комбинировать с изменением прозрачности, смещением по оси X/Y или поворотом:

var tween = gsap.to("#scaleElement", {
    scale: 1.8,
    x: 100,
    opacity: 0.5,
    rotation: 15,
    duration: 1,
    ease: "power1.inOut"
});

var scene = new ScrollMagic.Scene({
    triggerElement: "#scaleElement",
    duration: 600,
    triggerHook: 0.5
})
.setTween(tween)
.addTo(controller);

Управление триггером через CSS-селекторы и позиции

  • triggerElement может быть любым DOM-элементом, определяющим начало анимации.
  • triggerHook принимает значения от 0 до 1, где 0 — верх экрана, 1 — низ.
  • offset позволяет смещать точку срабатывания относительно элемента:
var scene = new ScrollMagic.Scene({
    triggerElement: "#scaleElement",
    duration: 500,
    triggerHook: 0.5,
    offset: 100 // начнется на 100px ниже триггера
});

Примеры динамического масштабирования

  1. Масштаб при прокрутке вниз и возвращение вверх:
gsap.to("#scaleElement", {scale: 1.5, duration: 1, ease: "linear"});

Сцену можно сделать reversible, чтобы при обратной прокрутке элемент возвращался к scale: 1.

  1. Постепенное увеличение с прозрачностью:
var tween = gsap.to("#scaleElement", {scale: 2, opacity: 0.5, duration: 1});
  1. Масштаб с отложенным запуском:

Используется offset для запуска анимации позже, чем появляется элемент на экране.

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

  • Использовать will-change: transform в CSS для элементов с анимацией масштаба.
  • Минимизировать количество одновременно анимируемых сцен, особенно при сложных композициях.
  • Предпочтительно комбинировать ScrollMagic с GSAP для более плавных и управляемых анимаций.

Полезные свойства для управления масштабом

  • scale — основной коэффициент масштаба.
  • scaleX, scaleY — отдельное масштабирование по осям.
  • transformOrigin — точка, вокруг которой выполняется масштабирование:
gsap.to("#scaleElement", {scale: 1.5, transformOrigin: "center center"});
  • ease — функция сглаживания (например, power1.inOut, linear, bounce).

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

Оглавление