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>- 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)
The API and syntax of Glaze is heavily inspired by Tailwind and MasterCSS.
Glaze is designed to work seamlessly with GSAP. To use Glaze, you must include GSAP in your project.
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.