# Utility-based animations for the web

Utility-first animations for GSAP or Motion, written in your HTML.

Terminal

```
npm install glazejs gsap
```

[Get Started](https://glaze.dev/docs/)

[GitHub](https://github.com/inline0/glaze)

Latest release [v2.1.0](https://github.com/inline0/glaze/releases/tag/v2.1.0) 2026-11-07 MIT GSAP 3 or Motion

JSX

```
<h1 data-animate="@lg:[&>span>span]:to:y-0|stagger-0.025">
  {"Utility-based animations for the web"
    .split(" ")
    .map((w, i, arr) => (
      <span className="inline-block overflow-hidden">
        <span className="inline-block translate-y-full">
          {w}
        </span>
        {i < arr.length - 1 ? " " : ""}
      </span>
    ))}
</h1>
```

## In practice

One attribute on a parent element animates its children at a breakpoint you define.

### Stagger child cards on large screens

Glaze reads each `data-animate` string and turns it into GSAP calls, so `from:opacity-0|y-50|duration-1` becomes `gsap.from(element, { opacity: 0, y: 50, duration: 1 })`.

In the sample, the bracket selector animates the three child divs with a stagger, and `@lg` runs it only while the `lg` media query matches, through `gsap.matchMedia`. Glaze ships only a `default` breakpoint, so `lg` is defined in the config.

[Read the syntax guide](https://glaze.dev/docs/syntax/)

HTML

```
<div data-animate="@lg:[&>div]:from:opacity-0|y-50|stagger-0.1|duration-0.5|ease-power2.out">
  <div>Card 1</div>
  <div>Card 2</div>
  <div>Card 3</div>
</div>
```

## GSAP or Motion

Each string becomes GSAP tweens on a GSAP timeline, so ScrollTrigger needs no extra syntax. The Motion adapter runs the same strings as Motion animations.

## Utility Syntax

Author animations in HTML with concise, composable tokens.

## Breakpoint Variants

Prefix tokens with @sm:, @lg: or any breakpoint you define as a media query in the config. Glaze runs them through GSAP matchMedia, or window.matchMedia with Motion.

## Timeline Ready

Sequence or parallelize motion with timeline utilities.

## Dot Notation

Target nested GSAP properties such as scale.x-2 or scrollTrigger.trigger-[&] with dot notation inside an animation.

## Presets

Name a token string once in the config and reuse it as preset-name, alongside other tokens on the same element.

## Lightweight

About 4 KB gzipped. GSAP or Motion is a separate dependency that you install and pass in.

## Watch Mode

Set watch: true and Glaze re-runs the animation of any element that is added or whose tokens change, debounced by 500 ms unless you set debounceTime.

Explore the complete Glaze guide, from installation and first use through advanced workflows and API details.

[Read the docs](https://glaze.dev/docs/)

[View source](https://github.com/inline0/glaze)