TweenLite - Text - Animations

Showing chained animations with onComplete callback

by Osama Qassar

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<div class="container">
  <h1 id="header">
  main text header 
  </h1>  
  <div id="sub">
  sub main text header 
  </div>
</div>

CSS

.container{
  text-align:center
}
#header{
  margin-top: 150px;
}

#sub{
  margin-top: 250px;
}

JavaScript

$(document).ready(function () {
    var header = $('#header');
    var sub = $('#sub');
    TweenLite.to(header, 1, {marginTop: 0});
    TweenLite.to(sub, 2, {marginTop: 10});
});