# Движение

Адаптер 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`. Анимация `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.

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

```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`. Также
не поддерживаются процентные позиции временной шкалы и stagger в форме объекта.
Если нужны эти функции, используйте адаптер GSAP.

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

## Очистка

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