# Движение

Адаптерът за 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`. Позиции във времевата линия, базирани на проценти, и разместване във формата на обект също не се поддържат. Когато тези функции са необходими, използвайте адаптера за GSAP.

Поддържаните помощни функции не означават, че двата енджина интерполират по един и същ начин. Motion управлява възпроизвеждането на анимациите и интерполацията на свойствата.

## Почистване

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