# Motion

Motioni adapter kasutab Motioni DOM-animatsioonijadasid. Installige avalik pakett ja 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>
```

Selle seadistuse jaoks pole GSAP vaja. Põhianalüüs, vaikeväärtused, selektorid, eelseadistused, jälgimine ja elutsükli meetodid on mõlema mootori puhul ühised.

Motion 14.6 DOM-i deklaratsioonid viitavad tüübile, mille pakub `@types/react`. Range TypeScript puhul tuleb projektides, mis kontrollivad sõltuvuste deklaratsioone, tüübid paigaldada ka arendussõltuvusena. React ennast pole vaja:

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

Lisage `"react"` faili `compilerOptions.types`, kui teie TypeScript konfiguratsioon piirab globaalseid tüübipakette.

## Toetatud väärtused

- Motioni DOM-i omadused arv- või stringväärtustega, sealhulgas läbipaistmatus, teisendused ja värvid.
- `from`, `to` ja paaris olekud `from`/`to`. `from` animatsioon lõpeb elemendi loomuliku stiiliga, kui väärtust `to` pole määratud.
- Arvulised väärtused `duration`, `delay`, `repeatDelay` ja `stagger` sekundites.
- Elemendi `repeat` väärtused vahemikus 0 kuni 19 ja tõeväärtuslik `yoyo`. Pikemaks või lõputuks kordamiseks kasutage ajaskaala kordust.
- Ajaskaala `defaults`, `delay`, `repeatDelay`, `repeat` ja `yoyo`; ajaskaala kordub lõputult väärtusega `repeat--1`.
- Arvulised ajaskaala positsioonid, järjestikune paigutus, `<`, `>` ja suhtelised nihked, näiteks `+=0.2`, `-=0.2` ning `<+=0.2`.
- Motioni nimega sujuvused, `linear`/`none` ja levinud GSAP sujuvuste nimed: `power0` kuni `power4`, `sine`, `expo`, `circ` ja `back` koos järelliidetega `.in`, `.out` või `.inOut`.
- GSAP pööramise aliasnimed, näiteks `rotation`, mis teisendatakse Motioni väärtuseks `rotate`.

Näiteks animeerige lapsed järjestikku nii, et animatsioonid kattuvad:

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

## Mootoripõhised piirangud

Adapter annab vea seadete puhul, mis on saadaval ainult mootoris GSAP, sealhulgas ScrollTrigger, pistikprogrammid GSAP, `autoAlpha`, protsendipõhised teisendused, näiteks `xPercent`, tagasihelistamisutiliidid, pesastatud `attr`/`css`-objektid ja suhtelised omaduste väärtused, näiteks `x-+=100`. Protsendipõhised ajaskaala positsioonid ja objektikujuline astmestamine pole samuti toetatud. Kui neid funktsioone on vaja, kasutage adapterit GSAP.

Toetatud utiliidid ei tähenda, et kahe mootori interpoleerimine oleks identne. Motion juhib animatsioonide taasesitust ja omaduste interpoleerimist.

## Puhastamine

Kasutage `animations.refresh()` pärast DOM-i uuendamist või lubage `watch`. Lõpetamisel kutsuge välja `animations.destroy()`. See tühistab Motioni taasesituse, eemaldab meediumipäringute kuulajad ja vaatlejad ning taastab algsed tekstisisesed stiilid.