Skip to content

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%");

动画定位参数详情