TweenMax staggerTo

code snippet for http://stackoverflow.com/questions/33121953/convert-from-gsap-jquery-to-gsap-javascript

by Shishir Morshed

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<h1 id="animate1">
    <div class="nav-1">T</div>
    <div class="nav-1">R</div>
    <div class="nav-1">U</div>
    <div class="nav-1">S</div>
    <div class="nav-1">T</div>
    <div class="nav-1">E</div>
    <div class="nav-1">D</div> 
    <div class="nav-1">S</div>
    <div class="nav-1">E</div>
    <div class="nav-1">R</div>
    <div class="nav-1">V</div>
    <div class="nav-1">I</div>
    <div class="nav-1">C</div>
    <div class="nav-1">E</div>
</h1>

CSS

.nav-1 {
   display: inline-block;
}

JavaScript

var nav  = document.querySelectorAll('#animate1 div'); 
var tl = new TimelineMax(); 

tl.staggerTo(nav, 0.2, {scale: 1.2, ease: Power2.easeOut}, 0.2);
tl.staggerTo(nav, 0.2, {scale: 1, ease: Power2.easeOut}, 0.2, 0.2);