[CSS3 Animation] TweenMax.staggerTo()

时间：2022-03-30 11:18:07
<!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);

[CSS3 Animation] TweenMax.staggerTo()

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

相关文章