# Motion

L'adapter Motion usa le sequenze di animazione DOM di Motion. Installate il pacchetto pubblico e 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>
```

Per questa configurazione non è necessario GSAP. Parsing di base, valori predefiniti, selettori, preset, osservazione e metodi del ciclo di vita sono condivisi da entrambi i motori.

Le dichiarazioni DOM di Motion 14.6 fanno riferimento a un tipo fornito da `@types/react`. Per i progetti TypeScript rigorosi che controllano le dichiarazioni delle dipendenze, installate anche i tipi come dipendenza di sviluppo. React non è necessario:

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

Includete `"react"` in `compilerOptions.types` quando la configurazione TypeScript limita i pacchetti di tipi ambientali.

## Valori supportati

- Proprietà DOM di Motion con valori numerici o stringa, inclusi opacità, trasformazioni e colori.
- `from`, `to` e stati `from`/`to` accoppiati. Un'animazione `from` termina con lo stile naturale dell'elemento se non viene fornito un valore `to`.
- Valori numerici di `duration`, `delay`, `repeatDelay` e `stagger` in secondi.
- Valori `repeat` dell'elemento da 0 a 19 e `yoyo` booleano. Usate la ripetizione della timeline per ripetizioni più lunghe o infinite.
- `defaults`, `delay`, `repeatDelay`, `repeat` e `yoyo` della timeline; `repeat--1` ripete all'infinito.
- Posizioni numeriche della timeline, posizionamento sequenziale, `<`, `>` e offset relativi come `+=0.2`, `-=0.2` e `<+=0.2`.
- Valori di easing con nome di Motion, `linear`/`none` e nomi di easing GSAP comuni: da `power0` a `power4`, `sine`, `expo`, `circ` e `back`, con suffissi `.in`, `.out` o `.inOut`.
- GSAP alias di rotazione come `rotation`, mappati su `rotate` di Motion.

Ad esempio, animate gli elementi figli in sequenza con una sovrapposizione:

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

## Limiti specifici del motore

L'adapter genera un errore per le impostazioni esclusive di GSAP, inclusi ScrollTrigger, i plugin GSAP, `autoAlpha`, le trasformazioni percentuali come `xPercent`, le utilità di callback, gli oggetti `attr`/`css` annidati e i valori relativi delle proprietà come `x-+=100`. Anche le posizioni percentuali della timeline e lo stagger in formato oggetto non sono supportati. Usate l'adapter GSAP quando servono queste funzionalità.

Le utilità supportate non implicano un'interpolazione identica tra i due motori. Motion gestisce la riproduzione delle animazioni e l'interpolazione delle proprietà.

## Pulizia

Usate `animations.refresh()` dopo gli aggiornamenti del DOM oppure abilitate `watch`. Chiamate `animations.destroy()` durante lo smontaggio. Annulla la riproduzione di Motion, rimuove i listener delle media query e gli observer e ripristina gli stili inline originali.