# Motion

Motion-sovitin käyttää Motionin DOM-animaatiosekvenssejä. Asenna julkinen paketti 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>
```

Et tarvitse GSAP tähän määritykseen. Ydintoiminnot jäsentämiseen, oletuksiin, valitsimiin, esiasetuksiin, tarkkailuun ja elinkaarimenetelmiin ovat yhteisiä molemmille moottoreille.

Motion 14.6:n DOM-tyypitykset viittaavat tyyppeihin, jotka tarjoaa `@types/react`. Jos TypeScript-projektisi tarkistavat myös riippuvuuksien tyypitykset, asenna nämä tyypit kehitysriippuvuutena. Itse React ei ole tarpeen:

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

Sisällytä `"react"` kohteeseen `compilerOptions.types`, kun TypeScript-määrityksesi rajoittaa ympäristön tyyppipaketteja.

## Tuetut arvot

- Motionin DOM-ominaisuudet, joiden arvot ovat numeroita tai merkkijonoja, kuten peittävyys, muunnokset ja värit.
- `from`, `to` sekä paritetut `from`/`to`-tilat. `from`-animaatio päättyy elementin luonnolliseen tyyliin, jos arvoa `to` ei ole annettu.
- Numeeriset `duration`-, `delay`-, `repeatDelay`- ja `stagger`-arvot sekunteina.
- Elementin `repeat`-arvot väliltä 0–19 ja boolean-`yoyo`. Käytä aikajanan toistoa pidempään tai äärettömään toistoon.
- Aikajanan `defaults`, `delay`, `repeatDelay`, `repeat` ja `yoyo`; aikajanan `repeat--1` toistuu loputtomasti.
- Numeeriset aikajanasijainnit, peräkkäinen sijoittelu, `<`, `>` ja suhteelliset siirtymät, kuten `+=0.2`, `-=0.2` ja `<+=0.2`.
- Motionin nimetyt kevennykset, `linear`/`none` sekä yleiset GSAP-kevennysten nimet: `power0`–`power4`, `sine`, `expo`, `circ` ja `back`, sekä jälkiliitteet `.in`, `.out` tai `.inOut`.
- GSAP-kierron aliakset, kuten `rotation`, jotka muunnetaan Motionin `rotate`-arvoksi.

Animoidaan esimerkiksi lapset peräkkäin niin, että animaatiot menevät osittain päällekkäin:

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

## Moottorikohtaiset rajoitukset

Sovitin antaa virheen asetuksista, joita tukee vain GSAP, kuten ScrollTrigger, GSAP-laajennukset, `autoAlpha`, prosenttimuunnokset, kuten `xPercent`, takaisinkutsufunktiot, sisäkkäiset `attr`/`css`-objektit ja suhteelliset ominaisuusarvot, kuten `x-+=100`. Prosenttipohjaisia aikajanasijainteja ja objektimuotoista porrastusta ei myöskään tueta. Käytä GSAP-sovitinta, kun näitä ominaisuuksia tarvitaan.

Tuetut apufunktiot eivät tarkoita, että moottorit interpoloisivat arvot samalla tavalla. Motion hallitsee animaation toistoa ja ominaisuuksien interpolointia.

## Siivous

Käytä `animations.refresh()` DOM-päivitysten jälkeen tai ota käyttöön `watch`. Kutsu `animations.destroy()` purkamisen yhteydessä. Se peruuttaa Motion-toiston, poistaa media query -kuuntelijat ja tarkkailijat sekä palauttaa alkuperäiset inline-tyylit.