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>
<img id="logo" src="http://40.media.tumblr.com/87d3fafaed41dca1532e9e1346f52130/tumblr_nmptmg6rDR1ushyv6o4_1280.png">
<br>
<input type="button" id="tweenbutton" value="create new tween">

CSS

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

JavaScript

var logo = document.getElementById("logo"),
		tweenbutton = document.getElementById("tweenbutton");

tweenbutton.onclick = function () {
TweenLite.to(logo, 0.4, {
  left: "+=100px",
});}