Syntax

The syntax of Glaze is straightforward and easy to understand. If you're familiar with Tailwind, you'll find Glaze's approach very similar.

Animation strings are defined in the following order:

Breakpoint (optional)
Selector (optional)
State (required)
Animation object (required)

Breakpoints

Breakpoints allow you to specify when an animation should run, based on the breakpoints defined in the configuration. The breakpoint is defined using the @ symbol, followed by the breakpoint name.

<div data-animate="@sm:from:opacity-0"></div>

Selectors

By default, animations are applied directly to the element itself. However, you can target other elements using selectors enclosed in brackets ([]) before the state.

<div data-animate="[&>h1]:to:opacity-1|stagger-0.25">
  <h1>...</h1>
  <h1>...</h1>
  <h1>...</h1>
</div>

The & symbol refers to the parent element, allowing you to specify a child selector.

With media queries:

<div data-animate="@sm:[&>h1]:to:opacity-1|stagger-0.25">
  <h1>...</h1>
  <h1>...</h1>
  <h1>...</h1>
</div>

State

The animation state indicates the beginning and end points of the animation:

from: The initial state of the animation.
to: The final state of the animation.

<div data-animate="from:opacity-0"></div>
<div data-animate="to:xPercent-50"></div>

If both states are defined, the animation will run from the initial state to the final state. (fromTo in GSAP)

<div data-animate="from:opacity-0.5 to:opacity-1"></div>

Animation object

The animation object specifies the properties to animate, following the state.

<div data-animate="to:yPercent-10"></div>

The string is parsed by splitting at the dash (-), where the first part is the property name, and the second part is its value. Values are automatically converted to their appropriate type (string, number, or boolean).

Chaining properties

To combine multiple properties in a single animation, separate them with a pipe (|) character.

<div data-animate="to:opacity-1|yPercent-10"></div>

Nested objects

Access nested object properties by separating keys with a dot (.) character.

<div data-animate="to:scale.x-2|scale.y-2"></div>

Negative values

For negative values, enclose the value in brackets. ([])

<div data-animate="to:xPercent-[-50]"></div>

Spaces

For values with spaces, use an underscore (_) character.

<div data-animate="to:boxShadow-[0_0_50px_20px_red]"></div>

On this page