Изменение параметров на разных разрешениях

GSAP (GreenSock Animation Platform) предоставляет мощные возможности для создания адаптивных анимаций, которые корректно реагируют на изменения размеров экрана. В работе с различными разрешениями важную роль играют медиа-запросы GSAP, позволяющие динамически подстраивать свойства анимации под текущие условия просмотра.

Использование matchMedia в GSAP

Метод gsap.matchMedia() служит аналогом CSS-медиа-запросов, но работает внутри JavaScript и позволяет управлять анимациями в зависимости от размеров окна.

const mm = gsap.matchMedia();

mm.add("(min-width: 1024px)", () => {
  gsap.to(".box", { x: 400, duration: 2 });
});

mm.add("(max-width: 1023px)", () => {
  gsap.to(".box", { x: 200, duration: 1.5 });
});

  • Ключевые моменты:

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

Адаптивные временные линии (Timeline)

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

const mm = gsap.matchMedia();
const tl = gsap.timeline();

mm.add("(min-width: 768px)", () => {
  tl.to(".element", { x: 300, scale: 1.2, duration: 2 })
    .to(".element", { rotation: 45, duration: 1 });
});

mm.add("(max-width: 767px)", () => {
  tl.to(".element", { x: 150, scale: 1, duration: 1.5 })
    .to(".element", { rotation: 30, duration: 0.8 });
});

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

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

Динамическое обновление свойств при ресайзе

При изменении размеров окна часто требуется обновлять анимации без их перезапуска. В GSAP это удобно делать через функцию matchMedia.add() с опцией revert: true, которая возвращает элементы к исходному состоянию перед применением новых правил.

mm.add("(max-width: 600px)", () => {
  return gsap.to(".item", { x: 100, opacity: 0.5 });
}, { revert: true });

  • Пояснение:

    • revert: true позволяет анимации автоматически отменяться при смене медиазапроса.
    • Это предотвращает конфликт между разными версиями анимаций на разных разрешениях.

Использование функции обратного вызова (onUpdate) для адаптивных значений

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

gsap.to(".circle", {
  x: () => window.innerWidth / 2 - 50,
  duration: 1.5
});

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

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

Комбинирование медиазапросов и переменных CSS

Для гибкой настройки стилей можно использовать CSS-переменные совместно с GSAP:

:root {
  --box-size: 100px;
}

@media (max-width: 768px) {
  :root {
    --box-size: 50px;
  }
}
gsap.to(".box", {
  width: "var(--box-size)",
  height: "var(--box-size)",
  duration: 1
});

  • Преимущества:

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

Рекомендации по структуре адаптивных анимаций

  1. Разделение условий по диапазонам экранов Создавать отдельные блоки mm.add() для мобильных, планшетов и десктопов.

  2. Использование временных линий для сложных сценариев Включать последовательные и параллельные анимации в одну адаптивную временную линию.

  3. Минимизация дублирования кода Общие свойства анимации выносить в отдельные объекты или функции.

  4. Контроль за перезапуском анимаций при ресайзе Опция revert и динамические функции позволяют избежать конфликтов между разными медиазапросами.

  5. Интеграция с CSS-переменными Позволяет легко управлять размерами, цветами и позициями элементов для разных экранов без изменения JavaScript-кода.

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

Оглавление