Motion

The Motion adapter uses Motion's DOM animation sequences. Install the public package and 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>

You do not need GSAP for this setup. Core parsing, defaults, selectors, presets, watching and lifecycle methods are shared by both engines.

Motion 14.6's DOM declarations reference a type supplied by @types/react. For strict TypeScript projects that check dependency declarations, also install the types as a development dependency. React itself is not needed:

pnpm add -D @types/react

Include "react" in compilerOptions.types when your TypeScript configuration restricts ambient type packages.

Supported values

• Motion DOM properties with numeric or string values, including opacity, transforms and colors.
• from, to, and paired from/to states. A from animation ends at the element's natural style when no to value is supplied.
• Numeric duration, delay, repeatDelay and stagger values in seconds.
• Element repeat values from 0 through 19 and boolean yoyo. Use timeline repeat for longer or infinite repetition.
• Timeline defaults, delay, repeatDelay, repeat and yoyo; timeline repeat--1 repeats indefinitely.
• Numeric timeline positions, sequential placement, <, >, and relative offsets such as +=0.2, -=0.2 and <+=0.2.
• Motion named easing, linear/none, and common GSAP easing names: power0 through power4, sine, expo, circ and back, with .in, .out or .inOut suffixes.
• GSAP rotation aliases such as rotation mapped to Motion's rotate.

For example, animate children in sequence with an overlap:

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

Engine-specific limits

The adapter throws an error for GSAP-only settings, including ScrollTrigger, GSAP plugins, autoAlpha, percentage transforms such as xPercent, callback utilities, nested attr/css objects, and relative property values such as x-+=100. Percentage-based timeline positions and object-form stagger are also unsupported. Use the GSAP adapter when those features are required.

Supported utilities do not imply identical interpolation between the two engines. Motion owns its animation playback and property interpolation.

Cleanup

Use animations.refresh() after DOM updates, or enable watch. Call animations.destroy() on teardown. It cancels Motion playback, removes media query listeners and observers, and restores original inline styles.