Utility-based animations for the web
Utility-first animations for GSAP or Motion, written in your HTML.
npm install glazejs gsapLatest releasev2.1.0MITGSAP 3 or Motion
<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| 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.
<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>glaze({
lib: { gsap: { core: gsap } },
breakpoints: {
default: "(min-width: 1px)",
sm: "(min-width: 640px)",
md: "(min-width: 768px)",
lg: "(min-width: 1024px)",
},
});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.