# Motion

De Motion-adapter gebruikt Motion's DOM-animatiereeksen. Installeer het openbare pakket en 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>
```

Je hebt GSAP niet nodig voor deze configuratie. Kernparsing, standaardwaarden, selectors, presets, observatie en levenscyclusmethoden worden door beide engines gedeeld.

De DOM-declaraties van Motion 14.6 verwijzen naar een type dat wordt geleverd door `@types/react`. Installeer voor strikte TypeScript-projecten die declaraties van afhankelijkheden controleren ook de types als ontwikkelafhankelijkheid. React zelf is niet nodig:

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

Neem `"react"` op in `compilerOptions.types` wanneer je TypeScript-configuratie ambient typepakketten beperkt.

## Ondersteunde waarden

- DOM-eigenschappen van Motion met numerieke of tekenreekswaarden, waaronder dekking, transformaties en kleuren.
- `from`, `to` en gepaarde `from`/`to`-toestanden. Een `from`-animatie eindigt in de natuurlijke stijl van het element als er geen `to`-waarde is opgegeven.
- Numerieke waarden voor `duration`, `delay`, `repeatDelay` en `stagger` in seconden.
- Elementwaarden voor `repeat` van 0 tot en met 19 en een booleaanse `yoyo`. Gebruik herhaling van de tijdlijn voor langere of oneindige herhaling.
- Tijdlijn-`defaults`, `delay`, `repeatDelay`, `repeat` en `yoyo`; tijdlijn-`repeat--1` wordt onbeperkt herhaald.
- Numerieke tijdlijnposities, opeenvolgende plaatsing, `<`, `>` en relatieve offsets zoals `+=0.2`, `-=0.2` en `<+=0.2`.
- Benoemde easingfuncties van Motion, `linear`/`none` en gangbare namen voor GSAP-easing: `power0` tot en met `power4`, `sine`, `expo`, `circ` en `back`, met de achtervoegsels `.in`, `.out` of `.inOut`.
- Rotatiealiassen voor GSAP, zoals `rotation`, die worden omgezet naar Motion's `rotate`.

Animeer bijvoorbeeld kinderen in volgorde met 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>
```

## Beperkingen van de engine

De adapter geeft een foutmelding bij instellingen die alleen voor GSAP gelden, waaronder ScrollTrigger, plugins van GSAP, `autoAlpha`, procentuele transformaties zoals `xPercent`, callbackhulpmiddelen, geneste objecten `attr`/`css` en relatieve eigenschapswaarden zoals `x-+=100`. Procentuele tijdlijnposities en objectvormige stagger worden ook niet ondersteund. Gebruik de GSAP-adapter wanneer je deze functies nodig hebt.

Ondersteunde hulpmiddelen betekenen niet dat interpolatie tussen de twee engines identiek is. Motion beheert zelf het afspelen van animaties en de interpolatie van eigenschappen.

## Opruimen

Gebruik `animations.refresh()` na DOM-updates of schakel `watch` in. Roep `animations.destroy()` aan bij het afbreken. Dit annuleert het afspelen van Motion, verwijdert mediaquerylisteners en observers en herstelt de oorspronkelijke inline-stijlen.