回调函数:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 100px;
height: 100px;
background: red;
margin: 10px;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<script type="text/javascript" src="js/TweenMax.min.js" ></script>
<script>
var t = new TimelineMax();
t.staggerTo('div',5,{
x: 100,
onStart: function(){
console.log("onStart*******");
},
onUpdate: function(){
console.log("onUpdate*******");
},
onComplete: function(){
console.log("onComplete*******");
}
},1)
</script>
</body>
</html>
3d动画
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/**
* transform-style: preserve-3d; 父级是3D空间
* perspective: 800px; 紧身
*/
/*body{
transform-style: preserve-3d;
perspective: 100px;
}*/
div{
width: 100px;
height: 100px;
background: red;
margin: 50px auto;
}
</style>
</head>
<body>
<div></div>
<script type="text/javascript" src="js/TweenMax.min.js" ></script>
<script>
var t = new TimelineMax();
t.set('div',{
transformPerspective: 300
})
t.to('div',5,{
rotationY: 45
},1)
</script>
</body>
</html>