https://gsap.com/resources/getting-started/timelines
要解决的问题:根据相对动画开始时的总延时的时长计算、更改都不太灵活,通过timeline来引入动画元素之间的播放顺序和延时,例如
javascript
let tl = gsap.timeline()
// start at exactly 1 second into the timeline (absolute)
tl.to(".green", { x: 600, duration: 2 }, 1);
// insert at the start of the previous animation
tl.to(".purple", { x: 600, duration: 1 }, "<");
// insert 1 second after the end of the timeline (a gap)
tl.to(".orange", { x: 600, duration: 1 }, "+=1");
// overlap with the end of the timeline by 25% of the inserting animation's total duration
tl.to(".class", {x: 100}, "-=25%");