# Motion

Motion adapteris izmanto Motion DOM animāciju secības. Instalējiet publisko pakotni un 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>
```

Šai iestatīšanai GSAP nav vajadzīgs. Abiem dzinējiem ir kopīga pamatparsēšana, noklusējuma vērtības, selektori, sākotnējie iestatījumi, novērošana un dzīves cikla metodes.

Motion 14.6 DOM deklarācijās ir atsauce uz tipu, ko nodrošina `@types/react`. Stingriem TypeScript projektiem, kas pārbauda atkarību deklarācijas, instalējiet šos tipus arī kā izstrādes atkarību. Pats React nav vajadzīgs:

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

Iekļaujiet `"react"` failā `compilerOptions.types`, ja jūsu TypeScript konfigurācija ierobežo globāli pieejamos tipu pakotņu nosaukumus.

## Atbalstītās vērtības

- Motion DOM īpašības ar skaitliskām vai virknes vērtībām, tostarp necaurspīdīgums, transformācijas un krāsas.
- `from`, `to` un pārī savienoti stāvokļi `from`/`to`. `from` animācija beidzas elementa dabiskajā stilā, ja nav norādīta vērtība `to`.
- Skaitliskas vērtības `duration`, `delay`, `repeatDelay` un `stagger` sekundēs.
- Elementa vērtības `repeat` no 0 līdz 19 un Būla vērtība `yoyo`. Ilgākai vai bezgalīgai atkārtošanai izmantojiet laika skalas atkārtojumu.
- Laika skalas vērtības `defaults`, `delay`, `repeatDelay`, `repeat` un `yoyo`; laika skala `repeat--1` atkārtojas bezgalīgi.
- Skaitliskas laika skalas pozīcijas, secīga izvietošana, `<`, `>` un relatīvie nobīdījumi, piemēram, `+=0.2`, `-=0.2` un `<+=0.2`.
- Motion nosauktie atvieglošanas veidi, `linear`/`none` un biežākie GSAP atvieglošanas nosaukumi: no `power0` līdz `power4`, `sine`, `expo`, `circ` un `back`, ar sufiksiem `.in`, `.out` vai `.inOut`.
- GSAP rotācijas aizstājvārdi, piemēram, `rotation`, kas tiek kartēts uz Motion `rotate`.

Piemēram, animējiet bērnelementus secīgi ar pārklāšanos:

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

## Dzinējam specifiskie ierobežojumi

Adapteris rada kļūdu iestatījumiem, kas pieejami tikai GSAP, tostarp ScrollTrigger, spraudņiem GSAP, `autoAlpha`, procentuālām transformācijām, piemēram, `xPercent`, atzvanīšanas funkciju utilītām, iegultiem objektiem `attr`/`css` un relatīvām īpašību vērtībām, piemēram, `x-+=100`. Procentuālās laika skalas pozīcijas un objektu formāta pakāpeniskā izvietošana arī netiek atbalstīta. Ja šīs funkcijas ir vajadzīgas, izmantojiet adapteri GSAP.

Atbalstītās utilītas nenozīmē, ka abos dzinējos interpolācija ir identiska. Motion pats pārvalda animāciju atskaņošanu un īpašību interpolāciju.

## Tīrīšana

Izmantojiet `animations.refresh()` pēc DOM atjauninājumiem vai iespējojiet `watch`. Noņemot, izsauciet `animations.destroy()`. Tas atceļ Motion atskaņošanu, noņem multivides vaicājumu klausītājus un novērotājus, kā arī atjauno sākotnējos iekļautos stilus.