Timeline in gsap

Timeline

按照顺序依次执行动画(不需要设置delay)

1
2
3
4
5
let tl = gsap.timeline({ paused: true });

tl.to(".green", { x: 600, duration: 2 }, 3); // 开始执行时间是3s后
tl.to(".purple", { x: 600, duration: 1, delay: 1 }, "<"); // 开始执行时间'<', 插入到上一个动画开头
tl.to(".orange", { x: 600, duration: 1 }, "+=1"); // 上一个动画执行1s后

配置项目

1
2
3
4
5
6
gsap.timeline({ 
repeat: -1,
repeatDelay: 1,
yoyo: true,
defaults: {duration: 1}
})

本文作者: 孟 虎
本文链接: https://menghu1994.github.io/blog/2024/04/Animation/GSAP/Timeline/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!