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