# Рух

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

```sh
pnpm add glazejs motion
```

```ts
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" },
})
```

```html
<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 не потрібен:

```sh
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.

Наприклад, анімуйте дочірні елементи послідовно з перекриттям:

```html
<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, видаляє обробники медіазапитів і спостерігачів та відновлює початкові вбудовані стилі.