basic tween

by Laras intan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/plugins/CSSPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/easing/EasePack.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenLite.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script>
<div id="demo">
  <img id="logo" src="http://40.media.tumblr.com/87d3fafaed41dca1532e9e1346f52130/tumblr_nmptmg6rDR1ushyv6o4_1280.png">
  <div id="tagline">
    <span>I </span>
    <span>am </span>
    <span>Fly</span>
    <span>.</span>
    <span>.</span>
    <span>.</span>
  </div>
</div>
<br>
<br>
<br>
<br>
<br>
<input type="button" id="restartBtn" value="restart()">

CSS

#logo {
  position: relative;
  background-color: #e3ead9;
  width: 70px;
  height: 70px;
}

#demo {
  position: absolute;
  overflow: hidden;
  width: 692px;
  height: 90px;
  visibility: hidden;
}

#tagline {
  display: inline-block;
  position: relative;
}

span {
  font-size: 50px;
}

JavaScript

var logo = $("#logo"),
    tagline = $("#tagline span"),
    restartBtn = $("#restartBtn"),
    tl = new TimelineLite();
    
  tl.from(logo, 0.5, {
      left: "-=60px",
      ease: Back.easeOut
    })
    .staggerFrom(tagline, 1, {
      top: "-=50px",
      rotation: "-45deg",
      alpha: 0,
      scale: 1.8,
      ease: Back.easeOut
    }, 0.2);

  restartBtn.click(function() {
    tl.restart();
  });

  TweenLite.set($("#demo"), {
    css: {
      visibility: "visible"
    }
  });