Timelines

View as Markdown

Every animated element runs in a timeline. An element without one gets its own; tl declares a timeline that several elements share, so their animations play one after another.

Usage

Add the tl keyword to an element to make it a timeline. Motion then reads the other parts on that element as options for the timeline: a defaults: object that applies to every animation in it, and plain option-value pairs such as repeat-1 or yoyo-true. As everywhere in class mode, each part is a class with the animate- prefix.

HTML

<div
  class="animate-tl animate-defaults:ease-elastic|duration-1 animate-repeat-1 animate-yoyo-true"
>
  <div class="animate-to:rotate-360"></div>
</div>

This timeline gives its animations an elastic ease and a one-second duration, and plays once more in reverse (repeat and yoyo). Write a negative option in brackets: repeat-[-1] repeats forever.

The element that carries tl can animate as well: its own from and to play first, before the elements inside it.

Elements

Every animated element inside a timeline element joins that timeline, at any depth, without further markup.

HTML

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

tl: with a GSAP position in brackets moves an element’s start within the timeline. Here the second element starts three seconds before the first one ends.

Responsive timelines

Breakpoint prefixes on the elements inside a timeline add to their animations from that breakpoint on, while the timeline itself runs at every screen width:

HTML

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

With an lg breakpoint of (min-width: 1024px), both elements rotate at every screen width and also move sideways from 1024px on.

A breakpoint on tl itself, as in animate-@lg:tl, runs the whole timeline only while that breakpoint matches.

Hooking into a timeline

A named timeline can take animations from elements outside its container. Name it with tl/<name>; an element anywhere on the page joins it with tl:<name>, optionally followed by a position.

HTML

<div class="animate-tl/main animate-defaults:ease-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></div>
  <div></div>
</div>

Scroll-triggered timelines

To start a whole timeline on scroll, give it a scrollTrigger option on the timeline element:

HTML

<div class="animate-tl animate-scrollTrigger:trigger-&|start-top_center">
  <div class="animate-from:opacity-0"></div>
  <div class="animate-from:yPercent-50"></div>
</div>

See ScrollTrigger.