Рух

Адаптер 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. Якщо значення to не задано, анімація from завершується природним стилем елемента.
• Числові значення 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. Відсоткові позиції часової шкали та каскадне задання у формі об’єкта також не підтримуються. Якщо потрібні ці можливості, використовуйте адаптер GSAP.

Підтримка утиліт не означає, що обидва рушії виконують однакову інтерполяцію. Відтворення анімацій і інтерполяцію властивостей забезпечує Motion.

Очищення

Використовуйте animations.refresh() після оновлень DOM або ввімкніть watch. Під час очищення викликайте animations.destroy(). Він скасовує відтворення Motion, видаляє обробники медіазапитів і спостерігачів та відновлює початкові вбудовані стилі.