# Motion

Adaptorul Motion folosește secvențele de animație DOM din Motion. Instalați pachetul public și 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>
```

Pentru această configurare nu aveți nevoie de GSAP. Analizarea de bază, valorile implicite, selectorii, presetările, monitorizarea și metodele ciclului de viață sunt comune ambelor motoare.

Declarațiile DOM din Motion 14.6 fac referire la un tip furnizat de `@types/react`. Pentru proiectele TypeScript stricte, care verifică declarațiile dependențelor, instalați și tipurile ca dependență de dezvoltare. React în sine nu este necesar:

```sh
pnpm add -D @types/react
```

Includeți `"react"` în `compilerOptions.types` dacă configurația TypeScript restricționează pachetele de tipuri ambientale.

## Valori acceptate

- Proprietăți DOM Motion cu valori numerice sau șiruri, inclusiv opacitatea,
  transformările și culorile.
- Stările `from`, `to` și perechile `from`/`to`. O animație `from` se încheie cu stilul natural al elementului dacă nu este furnizată o valoare `to`.
- Valorile numerice `duration`, `delay`, `repeatDelay` și `stagger`, exprimate în secunde.
- Valorile `repeat` ale elementului, de la 0 la 19, și valoarea booleană `yoyo`. Folosiți repetarea cronologiei pentru repetări mai lungi sau infinite.
- `defaults`, `delay`, `repeatDelay`, `repeat` și `yoyo` ale cronologiei; `repeat--1` repetă cronologia la nesfârșit.
- Poziții numerice în cronologie, plasare secvențială, `<`, `>` și decalaje relative precum `+=0.2`, `-=0.2` și `<+=0.2`.
- Funcții de easing numite în Motion, `linear`/`none` și denumiri uzuale pentru funcțiile GSAP:
  `power0` până la `power4`, `sine`, `expo`, `circ` și `back`, cu sufixele `.in`,
  `.out` sau `.inOut`.
- Aliasuri GSAP pentru rotație, precum `rotation`, mapate la `rotate` din Motion.

De exemplu, animați copiii în secvență, cu o suprapunere:

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

## Limitări specifice motorului

Adaptorul generează o eroare pentru setările disponibile numai în GSAP, inclusiv ScrollTrigger, pluginurile GSAP, `autoAlpha`, transformările procentuale precum `xPercent`, utilitarele callback, obiectele `attr`/`css` imbricate și valorile relative ale proprietăților, precum `x-+=100`. Pozițiile procentuale din cronologie și decalarea sub formă de obiect nu sunt acceptate nici ele. Folosiți adaptorul GSAP dacă aveți nevoie de aceste funcționalități.

Utilitarele acceptate nu garantează o interpolare identică între cele două motoare. Motion gestionează redarea animațiilor și interpolarea proprietăților.

## Curățare

Folosiți `animations.refresh()` după actualizările DOM sau activați `watch`. Apelați `animations.destroy()` la demontare. Aceasta anulează redarea Motion, elimină ascultătorii de interogări media și observatorii și restabilește stilurile inline inițiale.