Utility-based animations for the web.

npm i glazejs

Go to docs

<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="relative inline-block overflow-hidden">
      <span className="inline-block translate-y-full">{w}</span>
      {w < arr.length - 1 ? <span>&nbsp;</span> : ""}
    </span>
  ))}
</h1>

🚀

Based on GSAP

Glaze is built on top of GSAP, a powerful animation library that allows you to create complex animations with little code.

🎨

Utility inspired

If you know Tailwind, you'll feel right at home with Glaze. It is inspired by its HTML- and utility-first approach.

📱

Breakpoints

Glaze supports responsive design out of the box, allowing you to define different animations for different screen sizes.

🔗

Timelines

Full support for timelines, allowing you to sequence multiple animations together, or run them in parallel.

🔍

Dot notation

Use dot notation for specifying nested properties in the settings object, granting complete control over the animation.

📚

Library-agnostic syntax

Though Glaze presently supports only GSAP, its syntax lays the groundwork for future integration with other libraries.