Адаптация анимаций

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

Настройка сцен с учётом размеров экрана

Сцена (Scene) в ScrollMagic является основным блоком для анимации. Она связывает элемент DOM с анимацией, определяя момент её запуска и длительность. Для адаптации анимации важно динамически определять параметры сцены:

const scene = new ScrollMagic.Scene({
    triggerElement: "#section1",
    duration: window.innerHeight * 0.8, // длительность пропорциональна высоте окна
    triggerHook: 0.5 // запуск в середине экрана
})
.setTween("#animateElement", { y: 200, opacity: 1 })
.addTo(controller);

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

Медиа-запросы и пересоздание сцен

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

let scene;

function createScene() {
    const duration = window.innerWidth < 768 ? 300 : 600;
    if(scene) scene.destroy(true);

    scene = new ScrollMagic.Scene({
        triggerElement: "#section2",
        duration: duration,
        triggerHook: 0.7
    })
    .setTween("#animateBox", { x: 100 })
    .addTo(controller);
}

window.addEventListener('resize', createScene);
createScene();

Важное замечание: метод destroy(true) удаляет сцену и её связь с контроллером, предотвращая накопление старых сцен и конфликт анимаций.

Анимации с динамическими элементами

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

const element = document.querySelector("#dynamicElement");
const elementHeight = element.offsetHeight;

const scene = new ScrollMagic.Scene({
    triggerElement: element,
    duration: elementHeight * 1.5
})
.setTween("#dynamicElement", { y: elementHeight / 2 })
.addTo(controller);

Суть: длительность и смещение зависят от размера элемента, что сохраняет пропорции анимации независимо от контента и разрешения экрана.

Использование Pin для адаптивных эффектов

Метод setPin() фиксирует элемент на экране на время сцены. Для адаптивных интерфейсов важно задавать параметр pushFollowers и динамически управлять размерами:

const pinScene = new ScrollMagic.Scene({
    triggerElement: "#header",
    duration: window.innerHeight
})
.setPin("#header", { pushFollowers: false })
.addTo(controller);

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

  • pushFollowers: false предотвращает сдвиг остальных элементов страницы, что особенно важно на мобильных устройствах.
  • Динамическое значение duration позволяет пину корректно работать при изменении высоты экрана.

Контроллер ScrollMagic и адаптивность

Контроллер управляет всеми сценами и их синхронизацией. Для адаптивного дизайна рекомендуется использовать один контроллер на страницу и пересоздавать сцены при изменении размеров окна:

const controller = new ScrollMagic.Controller();

window.addEventListener('resize', () => {
    // пересоздание всех сцен
    scenes.forEach(scene => {
        scene.destroy(true);
        scene.addTo(controller);
    });
});

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

Синхронизация с CSS-переменными

Для адаптивной анимации полезно использовать CSS-переменные, чтобы управлять параметрами анимации из стилей:

:root {
    --animation-distance: 200px;
}

@media (max-width: 768px) {
    :root {
        --animation-distance: 100px;
    }
}
const distance = getComputedStyle(document.documentElement)
    .getPropertyValue('--animation-distance');

const scene = new ScrollMagic.Scene({
    triggerElement: "#responsive",
    duration: distance
})
.setTween("#responsive", { y: distance })
.addTo(controller);

Преимущество: можно централизованно управлять параметрами анимации через CSS, что упрощает поддержку адаптивного дизайна.

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

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

  • Минимизировать количество пересоздаваемых сцен при resize.
  • Использовать requestAnimationFrame для тяжёлых анимаций.
  • Ограничивать длительность сцены для крупных элементов, чтобы избежать «тяжёлой» прокрутки.
let resizeTimeout;
window.addEventListener('resize', () => {
    clearTimeout(resizeTimeout);
    resizeTimeout = setTimeout(createScene, 200);
});

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

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

Оглавление