Движение

Адаптер Motion использует последовательности DOM-анимаций Motion. Установите общедоступный пакет и Motion:

pnpm add glazejs motion

import glaze from "glazejs"
import { createMotionAdapter } from "glazejs/motion"
import { animate, stagger } from "motion"

const animations = glaze({
  adapter: createMotionAdapter({ animate, stagger }),
  breakpoints: { md: "(min-width: 768px)" },
  defaults: { element: "duration-0.6" },
  presets: { rise: "from:opacity-0|y-24" },
})

<div data-animate="preset-rise"></div>
<div data-animate="from:opacity-0 to:opacity-1|x-120"></div>
<div data-animate="@md:from:rotate-180|scale-0.5"></div>

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

В объявлениях DOM-типов Motion 14.6 используется тип, предоставляемый @types/react. В проектах TypeScript со строгой проверкой, которая проверяет объявления зависимостей, установите эти типы также как зависимость для разработки. Сам React не требуется:

pnpm add -D @types/react

Добавьте "react" в compilerOptions.types, если конфигурация TypeScript ограничивает наборы глобальных типов.

Поддерживаемые значения

• Свойства DOM Motion с числовыми значениями или строками, включая прозрачность, трансформации и цвета.
• from, to и парные состояния from/to. Анимация from завершается естественным стилем элемента, если значение to не задано.
• Числовые значения duration, delay, repeatDelay и stagger в секундах.
• Значения элемента repeat от 0 до 19 и логическое значение yoyo. Для более длительного или бесконечного повторения используйте повтор временной шкалы.
• defaults, delay, repeatDelay, repeat и yoyo временной шкалы; repeat--1 временной шкалы повторяется бесконечно.
• Числовые позиции на временной шкале, последовательное размещение, <, > и относительные смещения, например +=0.2, -=0.2 и <+=0.2.
• Именованные функции плавности Motion, linear/none и распространённые имена функций плавности GSAP: от power0 до power4, sine, expo, circ и back, с суффиксами .in, .out или .inOut.
• GSAP псевдонимы вращения, например rotation, сопоставляемый с rotate в Motion.

Например, анимируйте дочерние элементы по очереди с перекрытием:

<div data-animate="tl defaults:duration-0.6">
  <div data-animate="from:opacity-0|y-24"></div>
  <div data-animate="from:opacity-0|y-24 tl:[-=0.2]"></div>
</div>

Ограничения конкретного движка

Адаптер выдаёт ошибку для настроек, доступных только в GSAP, включая ScrollTrigger, плагины GSAP, autoAlpha, процентные трансформации, например xPercent, утилиты обратных вызовов, вложенные объекты attr/css и относительные значения свойств, например x-+=100. Также не поддерживаются процентные позиции временной шкалы и stagger в форме объекта. Если нужны эти функции, используйте адаптер GSAP.

Поддержка утилит не означает, что оба движка выполняют интерполяцию одинаково. Воспроизведением анимации и интерполяцией свойств управляет Motion.

Очистка

Используйте animations.refresh() после обновлений DOM или включите watch. При очистке вызывайте animations.destroy(). Он отменяет воспроизведение Motion, удаляет обработчики медиазапросов и наблюдателей, а также восстанавливает исходные встроенные стили.