Documentation
Introduction

Introduction

Glaze is an animation framework that combines the power of GSAP (opens in a new tab) and utility-based document authoring à la Tailwind (opens in a new tab) to create a simple, yet powerful, way to compose animations for the web.

<div
  class="h-20 w-20 rounded-xl bg-amber-500 sm:invisible"
  data-animate="@sm:from:duration-1|autoAlpha-0|rotate-180|y-50|ease-power2.inOut"
></div>

Features

  • Breakpoints Define custom breakpoints and animate elements at different screen sizes using @{size} syntax. Uses GSAPs matchMedia (opens in a new tab).
  • Timelines Compose timelines using @tl.
  • Dot notation Use dot notation to control nested properties inside the animation object, e.g. to:scale-1.5|scrollTrigger.trigger-[&].
  • Lightweight ~3kb minified and gzipped.
  • Library agnostic Can be extended to work with other animation libraries. (coming soon)

Credits

The API and syntax of Glaze is heavily inspired by Tailwind (opens in a new tab) and MasterCSS (opens in a new tab).

Licensing and Requirements

Glaze is designed to work seamlessly with GSAP (opens in a new tab). To use Glaze, you must include GSAP in your project.

GSAP Licensing

GSAP is subject to its own licensing terms. Before incorporating GSAP with Glaze, ensure you review and comply with the GSAP Standard License (opens in a new tab).

Glaze itself is licensed under the MIT License. For more details, see the LICENSE file in the repository.

Install