Utility-based animations for the web.
<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> </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.