Timelines

Timelines (opens in a new tab) are fully supported in Glaze.

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 data-animate="tl defaults:ease-elastic|duration-1 yoyo-true">...</div>

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="grid gap-8" data-animate="tl defaults:ease-elastic|duration-4">
  <div
    class="h-20 w-20 rounded-xl bg-amber-500"
    data-animate="to:rotate-360"
  ></div>
  <div
    class="h-20 w-20 rounded-xl bg-green-500"
    data-animate="tl:[-=3] to:rotate-360"
  ></div>
</div>

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="grid gap-8" data-animate="tl defaults:power2.inOut|duration-2">
  <div
    class="h-20 w-20 rounded-xl bg-amber-500"
    data-animate="to:rotate-360 @lg:to:xPercent-[50]"
  ></div>
  <div
    class="h-20 w-20 rounded-xl bg-green-500"
    data-animate="tl:[-=1] to:rotate-360 @lg:to:xPercent-[-50]"
  ></div>
</div>

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="grid w-full grid-cols-2 justify-items-center">
  <div
    class="grid gap-8"
    data-animate="tl/main defaults:power2.inOut|duration-2"
  >
    <div
      class="h-20 w-20 rounded-xl bg-amber-500"
      data-animate="to:rotate-360"
    ></div>
    <div
      class="h-20 w-20 rounded-xl bg-green-500"
      data-animate="tl:[-=1] to:rotate-360"
    ></div>
  </div>
  <div
    class="tl grid gap-8"
    data-animate="tl:main-[-=1] [&>div]:to:rotate-360|stagger-0.25"
  >
    <div class="h-20 w-20 rounded-xl bg-rose-500"></div>
    <div class="h-20 w-20 rounded-xl bg-red-500"></div>
  </div>
</div>

Breakpoints ScrollTrigger