Utility-based animations for the web.
npm install glazejsGlaze 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.
``html copy
data-animate="@sm:from:duration-1|autoAlpha-0|rotate-180|y-50|ease-power2.inOut"
>
Features
- Breakpoints Define custom breakpoints and animate elements at different
screen sizes using
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-[&]`.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.