上一节的交错，是想让一组动画元素可以分开执行，但他们的动画效果是一样的。如果要不同的动画交叉执行，一个动画结束后，或者执行途中开始另一个动画。这种时候可以使用延迟，让第二个动画相对第一个延迟多久去执行。这样就需要对时间做一个非常准确的把控。所以GSAP提供了时间轴功能来处理这一效果。官方地址：
基本用法如下
let tl = gsap.timeline()
tl.to(".green", { x: 600, duration: 2 });
tl.to(".purple", { x: 600, duration: 1 });
tl.to(".orange", { x: 600, duration: 1 });
由gsap.timeline()代替gasp去创建动画，这样创建的多个动画会按写时的顺序执行，前一个执行完毕后再执行下一个。
如果想要多个动画交叉重叠，需要使用第三个参数，像下面这样
let tl = gsap.timeline()
tl.to(".green", { x: 600, duration: 2 }, 1);
tl.to(".purple", { x: 600, duration: 1 }, "<");
tl.to(".orange", { x: 600, duration: 1 }, "+=1");
第三个参数是“位置参数”，叫做“position parameter”，它有多种形式。具体的参考信息可以看官方文档 gsap.com/resources/p…
如果是一个数字，表示在原本的时间轴开始时间基础上延迟n秒。注意这里是相对于整个时间轴来说的。也就是说，如果你对多个动画都设置相同的数字，比如1，那他们就是会延迟1秒同时执行。
在数字的基础上还可以进行加减，例如“+=1”，表示在前一个动画结束的基础上加n秒或者减n秒。注意与上一个纯数字的区分。
如果是 “<” 表示和前一个动画的开头对齐，“>” 表示和前一个动画的结束对齐。还可以在此基础上加减数字，例如“<+=3”，表示上一个动画开始后三秒，“>-=0.5”，表示上一个动画结束前0.5秒
数字也可以变成百分比。这里的百分比是上一个动画总时长的百分比，例如“+=25%”，延迟上一个动画时长的四分之一开始执行。
timeline的返回值还有add函数和addLabel函数，参数是一个字符串，表示在时间轴上的某一点设定为标志，而后的动画都可以以此标志依据位置参数重新排列。例如
let tl = gsap.timeline();
tl.to("#green", {duration: 1, x: 854})
.add("blueSpin", "+=1")
.to("#blue", {duration: 1, x: 854, rotation: 360}, "blueSpin")
.to("#orange", {duration: 1, x: 854, rotation: 360}, "blueSpin+=0.5");
上面表示在上一个动画结束一秒的位置设定为blueSpin，第二个动画在这个位置开始，第三个动画在这个位置后0.5秒位置开始。
timeline函数可以设置repeat，yoyo，onStart等参数，和普通动画类似。有两个特殊参数，autoRemoveChildren表示动画结束后自动删除，default表示该时间轴下所有动画共有设置。
整个时间轴可以看作是一个大动画，所以gsap允许多个时间轴聚合为一个整体。例如
function intro() {
var tl = gsap.timeline();
return tl;
}
function middle() {
var tl = gsap.timeline();
return tl;
}
function conclusion() {
var tl = gsap.timeline();
return tl;
}
var master = gsap.timeline();
master
.add(intro())
.add(middle(), "+=2") //with a gap of 2 seconds
.add(conclusion(), "-=1"); //overlap by 1 second
由add方法将多个时间轴聚合起来，也同样可以对这多个时间轴进行定位设置。
add方法也可以聚合多个独立的动画形成一个时间轴，gasp的to，from，fromTo，set等发放会返回tween。例如
let tl = gsap.timeline()let tween1 = gsap.to(".green", { x: 600, duration: 2 })let tween2 = gsap.to(".purple", { x: 500, duration: 1 })let tween3 = gsap.to(".orange", { x: 500, duration: 1 })tl.add(tween1, 1)tl.add(tween2, '>+1')tl.add(tween3, '>+1')
add方法返回时间轴本身，所以链式调用也是可以的。除此之外还可以把label，callback或者以上所有的数组添加到时间轴的某一点。
有add就会有remove()，可以用来删除时间轴中的某个动画，label等，clear()则会清空时间轴上所有动画，label等。
pause()和addPause()都可以让动画轴在某一个时刻暂停。区别在于pause是直接让时间轴暂停在某处，addPause是动画运行到某处时暂停，同时addPause可以添加回调函数。而pause可以选择在暂停时是否触发回调。
paused()会让时间轴在当前位置暂停，也可以用来获取时间轴暂停状态。resume()是恢复动画播放，play()是让动画从头或者从某一时刻播放
除了上面的，还有repeat(), yoyo()等方法，具体可以看
