# Motion

Der Motion-Adapter verwendet DOM-Animationssequenzen von Motion. Installiere das öffentliche Paket und 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>
```

Für diese Einrichtung benötigst du GSAP nicht. Parsing, Standardwerte, Selektoren, Presets, Überwachung und Lifecycle-Methoden werden von beiden Engines gemeinsam genutzt.

Die DOM-Typdeklarationen von Motion 14.6 verweisen auf einen von `@types/react` bereitgestellten Typ. Installiere die Typen auch als Entwicklungsabhängigkeit, wenn deine strengen TypeScript-Projekte Abhängigkeitsdeklarationen prüfen. React selbst wird nicht benötigt:

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

Füge `"react"` zu `compilerOptions.types` hinzu, wenn deine TypeScript-Konfiguration globale Typ-Pakete einschränkt.

## Unterstützte Werte

- Motion-DOM-Eigenschaften mit numerischen oder Zeichenfolgenwerten, darunter Deckkraft, Transformationen und Farben.
- `from`, `to` und paarweise `from`/`to`-Zustände. Eine `from`-Animation endet beim natürlichen Stil des Elements, wenn kein `to`-Wert angegeben ist.
- Numerische Werte für `duration`, `delay`, `repeatDelay` und `stagger` in Sekunden.
- Elementwerte für `repeat` von 0 bis 19 und boolesches `yoyo`. Verwende Timeline-Wiederholungen für längere oder unendliche Wiederholungen.
- Timeline-`defaults`, `delay`, `repeatDelay`, `repeat` und `yoyo`; Timeline-`repeat--1` wiederholt sich unbegrenzt.
- Numerische Timeline-Positionen, sequenzielle Platzierung, `<`, `>` und relative Offsets wie `+=0.2`, `-=0.2` und `<+=0.2`.
- Benannte Motion-Easing-Funktionen, `linear`/`none` und gängige GSAP-Easing-Namen: `power0` bis `power4`, `sine`, `expo`, `circ` und `back`, mit den Suffixen `.in`, `.out` oder `.inOut`.
- GSAP-Rotationsaliase wie `rotation`, die Motion-`rotate` zugeordnet werden.

Zum Beispiel: Animiere untergeordnete Elemente mit Überlappung nacheinander:

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

## Engine-spezifische Einschränkungen

Der Adapter löst bei ausschließlich für GSAP geltenden Einstellungen einen Fehler aus, darunter ScrollTrigger, GSAP-Plugins, `autoAlpha`, prozentuale Transformationen wie `xPercent`, Callback-Hilfsfunktionen, verschachtelte `attr`/`css`-Objekte und relative Eigenschaftswerte wie `x-+=100`. Prozentbasierte Timeline-Positionen und Stagger-Werte in Objektform werden ebenfalls nicht unterstützt. Verwende den GSAP-Adapter, wenn du diese Funktionen benötigst.

Unterstützte Hilfsfunktionen bedeuten nicht, dass die Interpolation in beiden Engines identisch ist. Motion steuert die Wiedergabe seiner Animationen und die Eigenschaftsinterpolation selbst.

## Bereinigung

Verwende `animations.refresh()` nach DOM-Aktualisierungen oder aktiviere `watch`. Rufe beim Abbau `animations.destroy()` auf. Dadurch wird die Motion-Wiedergabe abgebrochen, Media-Query-Listener und Beobachter werden entfernt und die ursprünglichen Inline-Stile werden wiederhergestellt.