Timelines

Timelines allow you to create a sequence of animations and have precise control over their timing.

Auto timelines

If you don’t specify timeline name for an animation, a timeline for that animation will be created automatically. Name is inferred from element ID (if it exists), or generated randomly.

How it works

You can sequence animations using af-timeline attribute. It has a very simple syntax — first, you specify the name of the timeline, then the position of the current animation in the timeline. You can omit order, then all animations in that timelines will be put at the same position. To specify the position, you can use any of the position parameters that GSAP supports, like 0%, 0.5, <1, etc — check out the GSAP docs | Position Parameter for more info.

<div af-timeline="myanimation" af-from="x: 100" af-to="x: 0" af-target="& > div" af-options="duration: 1" af-options-md="delay: 0.5" af-scroll="">
  <div class="circle"></div>
  <div class="triangle"></div>
</div>

Or, if you want to assign multiple animations to the same timeline:

<div af-timeline="shapes" af-to="x: 100, backgroundColor: #303030"></div>
<div af-timeline="shapes, >0.5" af-to="y: 250, backgroundColor: #b135bf"></div>

In this case, first animations will be put at the very beginning of the timeline, and second animation will start 0.5 seconds after the first one ends.

Timeline options

You can also specify timeline options that will be applied to the timeline itself. Because af-options is related to animation, you should specify it inside af-timeline attribute itself:

<div af-timeline="myanimation, 0, {duration: 2, yoyo: true}"></div>