repository·main·Indexed 20 days ago
https://github.com/inline0/glazeA utility-first animation library for GSAP that uses a Tailwind-style syntax. Glaze allows developers to compose declarative animations directly in HTML using the data-animate attribute and concise tokens. Key features include responsive animation variants via breakpoint modifiers, global animation defaults, reusable presets, and integrated support for GSAP ScrollTrigger using dot notation.
Glaze provides a Tailwind-style syntax for GSAP animations. Key capabilities include:
Every animation requires a state to determine the starting and ending points:
from: Animates from the specified values to the element's natural state.to: Animates from the current state to the specified values.fromTo: Animates between two specific states (similar to GSAP's fromTo).Use these as the first part of the string after the optional breakpoint and selector.
<!-- from: start at these values, end at natural state -->
<div data-animate="from:opacity-0"></div>
<!-- to: start at current state, end at these values -->
<div data-animate="to:xPercent-50"></div>
<!-- fromTo: animate between two specific states -->
<div data-animate="from:opacity-0.5 to:opacity-1"></div>Glaze supports responsive animation definitions using breakpoints similar to Tailwind CSS. By prefixing an animation instruction with a breakpoint (e.g., @sm:, @lg:), you can apply different animation behaviors at different screen sizes. This functionality is powered by GSAP's matchMedia().
<!-- This animation only applies at the 'sm' breakpoint and above -->
<div data-animate="@sm:from:duration-1|autoAlpha-0|rotate-180|y-50|ease-power2.inOut|scrollTrigger.trigger-[&]"></div>Presets act as shortcuts that expand into full animation strings before processing. You can combine a preset with other animation properties or plugins (like scrollTrigger) within the same attribute by separating them with spaces.
<div data-animate="preset-fadeIn scrollTrigger.trigger-[&]"></div>Glaze animation strings follow a specific pattern to define how elements animate. The general structure is:
[breakpoint][selector]:state:properties
[breakpoint] (Optional): A screen size prefix (e.g., @sm).[selector] (Optional): A CSS selector to target child elements (e.g., [&>h1]).state: Defines the animation direction (from, to, or fromTo).properties: A pipe-separated list of property-value pairs (e.g., opacity-0|duration-1).<!-- Pattern: [breakpoint][selector]:state:properties -->
<div data-animate="@sm:[&>h1]:to:opacity-1|stagger-0.25"></div>Glaze uses the tl keyword within the data-animate attribute to create a timeline container. When an element is declared as a timeline, Glaze automatically incorporates all of its child elements into that timeline's scope. You do not need to explicitly include children in the timeline definition.
<div data-animate="tl defaults:ease-elastic|duration-1">
<div data-animate="to:rotate-360"></div>
<div data-animate="to:rotate-360"></div>
</div>You can set global animation values that apply to all timelines and all animated elements by providing a defaults object to the glaze() initialization function. This is useful for establishing a consistent easing, duration, or ScrollTrigger behavior across an entire project.
Use the tl key to set defaults for all timelines and the element key to set defaults for individual animated elements.
glaze({
lib: { gsap: { core: gsap } },
defaults: {
tl: "defaults:ease-power2.inOut scrollTrigger.trigger-[&]",
element: "duration-1",
},
});Glaze allows you to control GSAP ScrollTrigger properties directly within the data-animate attribute using the scrollTrigger.* prefix.
To use the element itself as the trigger, use the scrollTrigger.trigger-[&] syntax. The [&] token acts as a selector for the current element.
<div
data-animate="from:opacity-0|y-50|scrollTrigger.trigger-[&]"
></div>You can apply default animation properties to every animation within a timeline by using the defaults: prefix after the tl keyword. This is useful for setting a uniform ease, duration, or yoyo behavior for all children.
<div data-animate="tl defaults:ease-elastic|duration-4 yoyo-true">
<!-- Children will inherit these defaults -->
</div>Properties are listed after the state, separated by pipes (|). Each property is defined by a dash (-) separating the name and the value (e.g., property-value). Glaze automatically converts values to numbers, booleans, or strings.
scale.x-2 becomes { scale: { x: 2 } }).xPercent-[-50])._) instead of spaces (e.g., boxShadow-[0_0_50px_20px_red]).<!-- Standard properties -->
<div data-animate="to:opacity-1|yPercent-10|duration-0.5"></div>
<!-- Nested properties -->
<div data-animate="to:scale.x-2|scale.y-2"></div>
<!-- Negative values -->
<div data-animate="to:xPercent-[-50]"></div>
<!-- Values with spaces -->
<div data-animate="to:boxShadow-[0_0_50px_20px_red]"></div>To add Glaze to your project using a package manager, run the following command:
npm install glazejsYou can target child elements instead of the element holding the data-animate attribute by using bracket notation. Use the & symbol to refer to the parent element.
Example: [&>h1] targets all h1 children of the current element.
<!-- Animates all h1 children of this div -->
<div data-animate="[&>h1]:to:opacity-1|stagger-0.25">
<h1>One</h1>
<h1>Two</h1>
</div>
<!-- Combined with a breakpoint -->
<div data-animate="@sm:[&>h1]:to:opacity-1|stagger-0.25"></div>