# Motion

Motion adaptörü, Motion'ın DOM animasyon dizilerini kullanır. Genel paketi ve Motion'ı yükleyin:

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

Bu kurulum için GSAP gerekmez. Temel ayrıştırma, varsayılanlar, seçiciler, hazır ayarlar, izleme ve yaşam döngüsü yöntemleri her iki motor için ortaktır.

Motion 14.6'nın DOM bildirimleri, `@types/react` tarafından sağlanan bir türe başvurur. Bağımlılık bildirimlerini denetleyen katı TypeScript projelerinde bu türleri geliştirme bağımlılığı olarak da yükleyin. React bileşeninin kendisi gerekmez:

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

TypeScript yapılandırmanız ortam türü paketlerini kısıtladığında `"react"` değerini `compilerOptions.types` içine ekleyin.

## Desteklenen değerler

- Opaklık, dönüşümler ve renkler dahil, sayısal veya dize değerleri alan Motion DOM özellikleri.
- `from`, `to` ve eşleştirilmiş `from`/`to` durumları. `to` değeri verilmediğinde `from` animasyonu öğenin doğal stilinde sona erer.
- Saniye cinsinden sayısal `duration`, `delay`, `repeatDelay` ve `stagger` değerleri.
- 0 ile 19 arasındaki öğe `repeat` değerleri ve Boole `yoyo`. Daha uzun veya sonsuz tekrar için zaman çizelgesi yinelemesini kullanın.
- Zaman çizelgesi `defaults`, `delay`, `repeatDelay`, `repeat` ve `yoyo`; zaman çizelgesi `repeat--1` sonsuza dek yinelenir.
- Sayısal zaman çizelgesi konumları, sıralı yerleşim, `<`, `>` ve `+=0.2`, `-=0.2`, `<+=0.2` gibi göreli kaydırmalar.
- Motion adlandırılmış easing, `linear`/`none` ve yaygın GSAP easing adları: `power0` ile `power4` arası, `sine`, `expo`, `circ` ve `back`; `.in`, `.out` veya `.inOut` sonekleriyle.
- Motion'ın `rotate` değerine eşlenen `rotation` gibi GSAP dönüş takma adları.

Örneğin, çocuk öğeleri örtüşmeli biçimde sıralı olarak canlandırın:

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

## Motora özgü sınırlar

Adaptör, yalnızca GSAP motorunda bulunan ayarlar için hata verir; bunlara ScrollTrigger, GSAP eklentileri, `autoAlpha`, `xPercent` gibi yüzde dönüşümleri, geri çağırım yardımcıları, iç içe `attr`/`css` nesneleri ve `x-+=100` gibi göreli özellik değerleri dahildir. Yüzde tabanlı zaman çizelgesi konumları ve nesne biçimindeki kademelendirme de desteklenmez. Bu özellikler gerektiğinde GSAP adaptörünü kullanın.

Desteklenen yardımcılar, iki motor arasında aradeğerlemenin aynı olacağı anlamına gelmez. Motion, animasyon oynatımını ve özellik aradeğerlemesini yönetir.

## Temizleme

DOM güncellemelerinden sonra `animations.refresh()` kullanın veya `watch` özelliğini etkinleştirin. Kaldırma sırasında `animations.destroy()` çağrısını yapın. Motion oynatımını iptal eder, medya sorgusu dinleyicileriyle gözlemcileri kaldırır ve özgün satır içi stilleri geri yükler.