详情可见
实现一个动画实现不同动画然后等待上一个动画执行完成再执行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>07-GSAP动画管理</title>
<script src="js/TweenMax.js"></script>
<!--<script src="js/TimelineMax.js"></script>-->
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
background: #ccc;
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<script>
//实现一个动画实现不同动画然后等待上一个动画执行完成再执行
/*不建议分开写 不专业
TweenMax.staggerTo([".box1", ".box2", ".box3"], 3, {
x: 500
}, 3);
*/
/*
TweenMax.to(".box1", 4, {
x: 500
});
TweenMax.to(".box2", 3, {
x: 400,
delay:4
});
TweenMax.to(".box3", 3, {
x: 300,
delay:7
});
*/
let tm = new TimelineMax();
tm.add(
TweenMax.to(".box1", 4, {
x: 500
})
);
tm.add(
TweenMax.to(".box2", 3, {
x: 400
})
);
tm.add(
TweenMax.to(".box3", 3, {
x: 300
})
);
</script>
</body>
</html>