# Motion

Motion-adaptern använder Motions DOM-animationssekvenser. Installera det publika paketet och 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>
```

Du behöver inte GSAP för den här konfigurationen. Kärnans parsning, standardvärden, väljare, förinställningar, bevakning och livscykelmetoder delas av båda motorerna.

DOM-deklarationerna i Motion 14.6 hänvisar till en typ som tillhandahålls av `@types/react`. För strikta TypeScript-projekt som kontrollerar beroendedeklarationer ska du även installera typerna som ett utvecklingsberoende. React behövs inte i sig:

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

Ta med `"react"` i `compilerOptions.types` när din TypeScript-konfiguration begränsar omgivande typpaket.

## Värden som stöds

- Motion DOM-egenskaper med numeriska värden eller strängvärden, inklusive opacitet, transformeringar och färger.
- `from`, `to` och parade tillstånd för `from`/`to`. En `from`-animation slutar med elementets naturliga stil när inget värde för `to` anges.
- Numeriska värden för `duration`, `delay`, `repeatDelay` och `stagger` i sekunder.
- Elementvärden för `repeat` från 0 till 19 och booleskt värde för `yoyo`. Använd tidslinjens upprepning för längre eller oändlig upprepning.
- Tidslinjens `defaults`, `delay`, `repeatDelay`, `repeat` och `yoyo`; tidslinjens `repeat--1` upprepas utan slut.
- Numeriska positioner på tidslinjen, sekventiell placering, `<`, `>` och relativa förskjutningar som `+=0.2`, `-=0.2` och `<+=0.2`.
- Namngivna easing-funktioner i Motion, `linear`/`none` och vanliga namn på GSAP easing-funktioner: `power0` till `power4`, `sine`, `expo`, `circ` och `back`, med suffixen `.in`, `.out` eller `.inOut`.
- GSAP-alias för rotation, som `rotation`, mappade till Motions `rotate`.

Till exempel kan du animera underordnade element i sekvens med överlappning:

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

## Motorspecifika begränsningar

Adaptern ger ett fel för inställningar som endast stöds av GSAP, inklusive ScrollTrigger, insticksprogram för GSAP, `autoAlpha`, procentbaserade transformeringar som `xPercent`, callback-verktyg, nästlade objekt för `attr`/`css` och relativa egenskapsvärden som `x-+=100`. Procentbaserade positioner på tidslinjen och stagger i objektform stöds inte heller. Använd adaptern GSAP när du behöver dessa funktioner.

Att verktygen stöds innebär inte att interpoleringen är identisk mellan de två motorerna. Motion styr sin egen animationsuppspelning och egenskapsinterpolering.

## Rensning

Använd `animations.refresh()` efter DOM-uppdateringar eller aktivera `watch`. Anropa `animations.destroy()` vid nedmontering. Det avbryter Motion-uppspelningen, tar bort mediafrågeavlyssnare och observatörer och återställer ursprungliga inline-format.