Timelines

GSAP Timelines let you chain animations together. Glaze supports them with the tl keyword.

Basic timeline

Add tl to create a timeline container:

<div data-animate="tl defaults:ease-elastic|duration-1">
  <div data-animate="to:rotate-360"></div>
  <div data-animate="to:rotate-360"></div>
</div>

By design, Glaze incorporates all child elements of a timeline-declared element into the timeline's scope - you don't need to explicitly include them.

Timeline defaults

Set defaults for the whole timeline:

<div data-animate="tl defaults:ease-elastic|duration-4 yoyo-true">
  ...
</div>

Timing control

Adjust when child animations start using tl::

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

tl:[-=3] means "start 3 seconds before the previous animation ends" (overlap).

Common timing values:

• tl:[+=1] - Start 1 second after previous ends
• tl:[-=1] - Start 1 second before previous ends (overlap)
• tl:[<] - Start at same time as previous

Responsive timelines

Combine breakpoints with timelines:

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

The rotation always happens, but the horizontal movement only kicks in on large screens.

Named timelines

Give your timeline a name to reference it from anywhere:

<div data-animate="tl/main defaults:power2.inOut|duration-2">
  <div data-animate="to:rotate-360"></div>
</div>

<!-- Somewhere else in the DOM -->
<div data-animate="tl:main-[-=1] to:scale-1.5">
  ...
</div>

Use tl/name to create a named timeline, and tl:name to join it.