Reduced motion

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

ScrollMagic предоставляет возможности для адаптации поведения анимаций под это системное предпочтение, предотвращая потенциальный дискомфорт.

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

Сначала необходимо определить, включена ли у пользователя опция Reduced motion. В CSS это реализуется через медиавыражение:

@media (prefers-reduced-motion: reduce) {
  /* Здесь можно отключить анимации */
}

В JavaScript проверка выполняется с помощью window.matchMedia:

const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;

Если prefersReducedMotion равно true, следует либо полностью отключить анимации ScrollMagic, либо заменить их на минимальные, менее интенсивные эффекты.

Отключение сцен ScrollMagic

Каждая сцена в ScrollMagic создается с помощью конструктора ScrollMagic.Scene. Чтобы учитывать Reduced motion, можно проверять флаг перед созданием сцены:

if (!prefersReducedMotion) {
    const scene = new ScrollMagic.Scene({
        triggerElement: "#trigger",
        duration: 300,
        offset: 50
    })
    .setTween("#animate", 0.5, { opacity: 1, y: 0 })
    .addTo(controller);
}

Если пользователь выбрал Reduced motion, создание сцены можно полностью пропустить, чтобы не нагружать интерфейс анимацией.

Уменьшение анимаций вместо полного отключения

Иногда нужно не отключать анимацию, а сделать её мягче. Для этого можно изменять продолжительность, расстояние смещения и свойства анимации:

const duration = prefersReducedMotion ? 50 : 300;
const yOffset = prefersReducedMotion ? 0 : 100;

const scene = new ScrollMagic.Scene({
    triggerElement: "#trigger",
    duration: duration,
    offset: 20
})
.setTween("#animate", 0.5, { opacity: 1, y: yOffset })
.addTo(controller);

Здесь длительность сцены и смещение элемента адаптируются под системное предпочтение.

Управление анимациями с помощью GSAP

ScrollMagic тесно интегрируется с библиотекой GSAP. При использовании Reduced motion можно создавать альтернативные анимации:

const tween = prefersReducedMotion
    ? gsap.to("#animate", { opacity: 1 }) // только плавное появление
    : gsap.to("#animate", { opacity: 1, y: 100, duration: 0.5 });

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

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

Динамическая реакция на изменения

Системные настройки пользователя могут изменяться во время работы приложения. Для реагирования на это ScrollMagic и JS используют слушатель события change:

const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");

function updateAnimations(event) {
    if (event.matches) {
        controller.enabled(false); // отключаем все сцены
    } else {
        controller.enabled(true);  // включаем сцены обратно
    }
}

mediaQuery.addEventListener("change", updateAnimations);

Метод controller.enabled(false) приостанавливает все сцены ScrollMagic, эффективно отключая анимацию, а включение обратно восстанавливает их работу.

Рекомендации по адаптивной анимации

  • Минимизировать интенсивность движений: заменять смещения и вращения на плавное появление/исчезновение.
  • Сокращать длительность анимаций: чем короче анимация, тем меньше дискомфорт.
  • Использовать прогрессивное раскрытие: для Reduced motion оставлять только ключевые визуальные эффекты без дополнительных трансформаций.
  • Контролировать количество одновременных анимаций: чем меньше элементов движется одновременно, тем комфортнее пользователю.

Интеграция с существующими сценами

Даже в крупном проекте можно внедрить поддержку Reduced motion без полной переработки всех анимаций. Основные подходы:

  1. Проверять prefers-reduced-motion перед созданием каждой сцены.
  2. Создавать отдельный набор анимаций для пользователей с ограничениями.
  3. Использовать методы controller.enabled() и динамически менять tween для сцен на основе флага.

Эти техники позволяют создавать веб-интерфейсы на ScrollMagic, которые учитывают потребности пользователей с чувствительностью к движениям, сохраняя визуальную привлекательность и доступность.

Оглавление