Usage - Timelines

Usage

Start with the tl keyword inside the data attribute to establish a timeline. Glaze then treats the following strings as configuration options for this timeline.


            <div class="animate-tl defaults:ease-elastic|duration-1 yoyo-true">...</div>
Copy

This example initiates a timeline with specified default easing, duration, and yoyo properties.

Elements

By design, Glaze incorporates all child elements of a timeline-declared element into the timeline's scope, eliminating the need for explicit inclusion.


            <div class="animate-tl defaults:ease-elastic|duration-4">
      <div class="animate-to:rotate-360"></div>
      <div class="animate-tl:[-=3] to:rotate-360"></div>
    </div>
Copy

Adjust timing for individual elements using the tl: prefix to delay or advance their animation start times within the timeline.

Responsive timelines

Leverage media queries to control timeline execution. The example below demonstrates a timeline that activates at the lg breakpoint and adjusts individual element animations responsively.


            <div class="animate-tl defaults:power2.inOut|duration-2">
      <div class="animate-to:rotate-360 @lg:to:xPercent-[50]"></div>
      <div class="animate-tl:[-=1] animate-to:rotate-360 @lg:to:xPercent-[-50]"></div>
    </div>
Copy

This approach ensures the timeline and its component animations adapt to varying screen sizes.

Hooking into a timeline

Assign a name to your timeline to link animations from external elements, thereby extending the timeline's scope beyond its original container.

In the example below, the named timeline (main) allows for animations defined on other elements to join the timeline using the tl:{name} syntax.


            <div class="animate-tl/main defaults:power2.inOut|duration-2">
      <div class="animate-to:rotate-360"></div>
      <div class="animate-tl:[-=1] animate-to:rotate-360"></div>
    </div>
    <div class="animate-tl:main-[-=1] animate-[&>div]:to:rotate-360|stagger-0.25"></div>
Copy