# Motion

L'adaptateur Motion utilise les séquences d'animation DOM de Motion. Installez le package public et 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>
```

Vous n'avez pas besoin de GSAP pour cette configuration. L'analyse syntaxique, les valeurs par défaut, les sélecteurs, les préréglages, la surveillance et les méthodes de cycle de vie sont partagés par les deux moteurs.

Les déclarations DOM de Motion 14.6 font référence à un type fourni par `@types/react`. Pour les projets TypeScript stricts qui vérifient les déclarations des dépendances, installez également les types comme dépendance de développement. React lui-même n'est pas nécessaire :

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

Incluez `"react"` dans `compilerOptions.types` lorsque votre configuration TypeScript limite les packages de types ambiants.

## Valeurs prises en charge

- Propriétés DOM de Motion avec des valeurs numériques ou textuelles, notamment l'opacité, les transformations et les couleurs.
- États `from`, `to` et `from`/`to` associés. Une animation `from` se termine avec le style naturel de l'élément si aucune valeur `to` n'est fournie.
- Valeurs numériques `duration`, `delay`, `repeatDelay` et `stagger` en secondes.
- Valeurs `repeat` d'élément comprises entre 0 et 19, et `yoyo` booléen. Utilisez la répétition de la timeline pour une répétition plus longue ou infinie.
- Valeurs de timeline `defaults`, `delay`, `repeatDelay`, `repeat` et `yoyo` ; `repeat--1` répète la timeline indéfiniment.
- Positions numériques dans la timeline, placement séquentiel, `<`, `>` et décalages relatifs tels que `+=0.2`, `-=0.2` et `<+=0.2`.
- Noms d'accélération prédéfinis de Motion, `linear`/`none` et noms d'accélération courants GSAP : de `power0` à `power4`, `sine`, `expo`, `circ` et `back`, avec les suffixes `.in`, `.out` ou `.inOut`.
- GSAP alias de rotation tels que `rotation`, mappés sur `rotate` de Motion.

Par exemple, animez les éléments enfants en séquence avec un chevauchement :

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

## Limites propres au moteur

L'adaptateur génère une erreur pour les paramètres propres à GSAP, notamment ScrollTrigger, les extensions GSAP, `autoAlpha`, les transformations en pourcentage telles que `xPercent`, les utilitaires de rappel, les objets `attr`/`css` imbriqués et les valeurs de propriété relatives telles que `x-+=100`. Les positions de timeline basées sur des pourcentages et le décalage progressif sous forme d'objet ne sont pas non plus pris en charge. Utilisez l'adaptateur GSAP si ces fonctionnalités sont nécessaires.

Les utilitaires pris en charge n'impliquent pas une interpolation identique entre les deux moteurs. Motion gère la lecture des animations et l'interpolation des propriétés.

## Nettoyage

Utilisez `animations.refresh()` après les mises à jour du DOM, ou activez `watch`. Appelez `animations.destroy()` lors du démontage. Cette méthode annule la lecture de Motion, supprime les écouteurs de requêtes média et les observateurs, puis restaure les styles intégrés d'origine.