# Timelines

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](/docs/motion/usage/scrolltrigger.md).