# 움직임

Motion 어댑터는 Motion의 DOM 애니메이션 시퀀스를 사용합니다. 공개 패키지와 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>
```

이 설정에는 GSAP이 필요하지 않습니다. 핵심 파싱, 기본값, 선택자, 프리셋, 감시 및 수명 주기 메서드는 두 엔진에서 공유됩니다.

Motion 14.6의 DOM 선언은 `@types/react`에서 제공하는 타입을 참조합니다. 종속성 선언을 검사하는 엄격한 TypeScript 프로젝트에서는 이 타입도 개발 종속성으로 설치하세요. React 자체는 필요하지 않습니다:

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

TypeScript 설정에서 전역 타입 패키지를 제한하는 경우 `"react"`을 `compilerOptions.types`에 포함하세요.

## 지원되는 값

- 숫자 또는 문자열 값을 사용하는 Motion DOM 속성(불투명도, 변환 및 색상 포함).
- `from`, `to` 및 쌍을 이루는 `from`/`to` 상태. `to` 값이 제공되지 않으면 `from` 애니메이션은 요소의 자연스러운 스타일에서 끝납니다.
- 초 단위의 숫자 `duration`, `delay`, `repeatDelay` 및 `stagger` 값.
- 0부터 19까지의 요소 `repeat` 값과 불리언 `yoyo`. 더 길거나 무한히 반복하려면 타임라인 반복을 사용하세요.
- 타임라인 `defaults`, `delay`, `repeatDelay`, `repeat` 및 `yoyo`. 타임라인 `repeat--1`은 무한히 반복됩니다.
- 숫자 타임라인 위치, 순차 배치, `<`, `>` 및 `+=0.2`, `-=0.2`, `<+=0.2` 같은 상대 오프셋.
- Motion의 명명된 이징, `linear`/`none` 및 일반적인 GSAP 이징 이름: `power0`부터 `power4`까지, `sine`, `expo`, `circ` 및 `back`. 여기에 `.in`, `.out` 또는 `.inOut` 접미사를 붙일 수 있습니다.
- GSAP 회전 별칭(예: `rotation`)은 Motion의 `rotate`에 매핑됩니다.

예를 들어, 자식 요소를 겹치도록 순차 애니메이션 처리할 수 있습니다:

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

## 엔진별 제한 사항

어댑터는 ScrollTrigger, GSAP 플러그인, `autoAlpha`, `xPercent` 같은 백분율 변환, 콜백 유틸리티, 중첩된 `attr`/`css` 객체, `x-+=100` 같은 상대 속성 값 등 GSAP 전용 설정에서 오류를 발생시킵니다. 백분율 기반 타임라인 위치와 객체 형식의 스태거도 지원되지 않습니다. 이러한 기능이 필요하면 GSAP 어댑터를 사용하세요.

유틸리티를 지원한다고 해서 두 엔진의 보간 방식까지 동일한 것은 아닙니다. Motion이 자체 애니메이션 재생과 속성 보간을 담당합니다.

## 정리

DOM 업데이트 후 `animations.refresh()`을 사용하거나 `watch`을 활성화하세요. 정리할 때 `animations.destroy()`를 호출하세요. Motion 재생을 취소하고, 미디어 쿼리 리스너와 옵저버를 제거하며, 원래 인라인 스타일을 복원합니다.