움직임

Motion 어댑터는 Motion의 DOM 애니메이션 시퀀스를 사용합니다. 공개 패키지와 Motion을 설치하세요:

pnpm add glazejs motion

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" },
})

<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 자체는 필요하지 않습니다:

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에 매핑됩니다.

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

<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 재생을 취소하고, 미디어 쿼리 리스너와 옵저버를 제거하며, 원래 인라인 스타일을 복원합니다.