[CSS3 Animation] TweenMax.staggerTo() 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Hello Greensock!</title>
    <link href='http://fonts.googleapis.com/css?family=Asap:400,700' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Signika' rel='stylesheet' type='text/css'>
    <link href='main.css' rel='stylesheet' type='text/css'>

</head>
<body>
<h2>TweenMax.staggerTo()</h2>
<div id="demo">
    <p>The start times of each animation are staggered by 0.5 seconds</p>
    <div class="box green"></div>
    <div class="box grey"></div>
    <div class="box orange"></div>
    <div class="box green"></div>
    <div class="box grey"></div>
    <div class="box orange"></div>
    <div class="box green"></div>
    <div class="box grey"></div>
    <div class="box orange"></div>
</div>
</body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-animate.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.6/TweenMax.min.js"></script>
<script src="app.js"></script>
</html>

CSS:

html, body {
    height: 100%;
}

body {
    background-color:#1d1d1d;
    font-family: "Asap", sans-serif;
    color:#989898;
    margin:0 10px;
    font-size:16px;
}

h1, h2, h3 {
    font-family: "Signika Negative", sans-serif;
    margin: 10px 0 10px 0;
    color:#f3f2ef;
}

h1 {
    font-size:36px;
}

h2 {
    font-size:30px;
}

h3 {
    font-size:24px;
}

p{
    line-height:22px;
    margin-bottom:16px;
    width:650px;
}

#demo {
    height:100%;
    position:relative;
}
.box {
    width:50px;
    height:50px;
    position:relative;
    border-radius:6px;
    margin-top:4px;
    display:inline-block
}

.green{
    background-color:#6fb936;
}

.orange {
    background-color:#f38630;
}
.grey {
    background-color:#989898;
}

Javascript:

TweenMax.staggerTo(".green", 1.5, {rotation:360, y:100, x: 50}, 0.5); //class="green" box ratate 360 degree to Y = 100, X = 50, every 0.5s, one green box start to move
TweenMax.staggerTo(".grey", 2, {rotation:720, y:150, x: 50}, 0.5);

 

 

The difference bewteen staggerTo() with to() method is that, staggerTo trigger element one by one, but to() trigger all elements at once.

 

posted @ 2014-11-28 00:20  Zhentiw  阅读(782)  评论(0)  编辑  收藏  举报