dnnsjsk / glaze

The utility-based animation framework for the web.

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

<div
  class="invisible h-20 w-20 rounded-xl bg-amber-500"
  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.
• 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 and MasterCSS.

Licensing and Requirements

Glaze is designed to work seamlessly with GSAP. 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.

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