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="https://image.freepik.com/free-vector/side-view-of-flying-superhero_23-2147501356.jpg">
<div id="bar">

</div>

CSS

#logo {
  position: relative;
  width: 70px;
  height: 70px;
}
#bar {
    background-color:	#f05e68; 
    positin:relative; 
    width:70px; 
    height:10px;
  
}

JavaScript

var logo = document.getElementById("logo"),
		bar =document.getElementById("bar");
TweenLite.to(logo, 3, {left: "500px",delay: 1});
TweenLite.to(bar, 2, {width:"500px"});