# Motion

Motion-adapteren bruger Motions DOM-animationssekvenser. Installér den offentlige pakke og 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 ikke GSAP til denne opsætning. Kernefunktionerne parsing, standardværdier, selectors, presets, overvågning og livscyklusmetoder deles af begge engines.

Motion 14.6's DOM-deklarationer refererer til en type, der leveres af `@types/react`. I strenge TypeScript-projekter, der kontrollerer afhængighedsdeklarationer, skal typerne også installeres som en udviklingsafhængighed. React er ikke nødvendig:

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

Medtag `"react"` i `compilerOptions.types`, når din TypeScript-konfiguration begrænser ambient typepakker.

## Understøttede værdier

- Motion DOM-egenskaber med numeriske værdier eller strengværdier, herunder opacity, transforms og farver.
- `from`, `to` og parrede `from`/`to`-tilstande. En `from`-animation slutter med elementets naturlige stil, hvis der ikke angives en `to`-værdi.
- Numeriske værdier for `duration`, `delay`, `repeatDelay` og `stagger` i sekunder.
- Elementværdier for `repeat` fra 0 til og med 19 samt boolesk `yoyo`. Brug tidslinjens gentagelse til længere eller uendelig gentagelse.
- Tidslinjens `defaults`, `delay`, `repeatDelay`, `repeat` og `yoyo`; tidslinjens `repeat--1` gentages uendeligt.
- Numeriske tidslinjepositioner, sekventiel placering, `<`, `>` og relative forskydninger som `+=0.2`, `-=0.2` og `<+=0.2`.
- Motions navngivne easing-funktioner, `linear`/`none` og almindelige navne på GSAP-easing-funktioner: `power0` til og med `power4`, `sine`, `expo`, `circ` og `back` med suffikserne `.in`, `.out` eller `.inOut`.
- GSAP-rotationsaliaser som `rotation`, der mappes til Motions `rotate`.

Animér for eksempel underordnede elementer sekventielt med overlap:

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

## Begrænsninger for den specifikke engine

Adapteren kaster en fejl for indstillinger, der kun findes i GSAP, herunder ScrollTrigger, GSAP-plugins, `autoAlpha`, procentvise transforms som `xPercent`, callback-hjælpefunktioner, indlejrede `attr`/`css`-objekter og relative egenskabsværdier som `x-+=100`. Procentbaserede tidslinjepositioner og stagger i objektform understøttes heller ikke. Brug GSAP-adapteren, når du har brug for disse funktioner.

Understøttede hjælpefunktioner betyder ikke, at de to engines interpolerer ens. Motion styrer sin egen animationsafspilning og interpolation af egenskaber.

## Oprydning

Brug `animations.refresh()` efter DOM-opdateringer, eller aktivér `watch`. Kald `animations.destroy()` ved nedtagning. Den annullerer Motion-afspilning, fjerner media query-lyttere og observers og gendanner de oprindelige inline-stile.