<link href='https://fonts.googleapis.com/css?family=Asap:400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Signika' rel='stylesheet' type='text/css'>
<h2>TweenMax.staggerTo() with callbacks</h2>
<div id="demo">
<p>View code comments in JS source tab for complete details.</p>
<div class="box green">1</div>
<div class="box grey">2</div>
<div class="box orange">3</div>
<div id="console"></div>
</div>
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;
}
#demo {
height:100%;
position:relative;
}
.box {
width:50px;
height:50px;
position:relative;
border-radius:6px;
margin-top:4px;
display:inline-block;
line-height:50px;
text-align:center;
color:#333;
font-size:24px;
}
.green{
background-color:#6fb936;
}
.orange {
background-color:#f38630;
}
.grey {
background-color:#989898;
}
#console {
width:400px;
min-height:150px;
background:#f3f2ef;
position:absolute;
left:200px;
display:inline-block;
padding:10px;
line-height:20px;
font-size:16px;
color:#333;
border-radius:8px;
}
.done {
color:#a00;
font-weight:bold;
}
var $console = $("#console")
//each tween is given and onComplete callback and onCompleteParams property
//onCompleteParams takes an array of values (even if only 1 value is being passed)
//"{self}" passes a reference to the individual tween to the onComplete callback function
//myCompleteAll is the name of the function being used for the staggerTo()'s onCompleteAll parameter
TweenMax.staggerTo(".box", 0.8, {rotation:360, y:120, onComplete:tweenComplete, onCompleteParams:["{self}"]}, 1.2, myCompleteAll);
//the following function fires when each individual tween completes.
//the tween parameter is a reference to the tween that calls the function
function tweenComplete(tween) {
$console.append("<p> tween complete / target text = " + tween.target.innerHTML + "</p>")
}
function myCompleteAll() {
$console.append("<p class='done'> all tweens complete </p>");
}
This Pen doesn't use any external CSS resources.