<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<span id="textS">GSAP</span>
<div id="content">
<div id="left-txt">GSAP </div>
<div id="center-txt">TweenMax</div>
<div id="right-txt"> is Awesome !...</div>
</div>
<div id='links'>
<a id='twitter' href="https://twitter.com/Diaco_ml" target="_blank"><span class='fa fa-twitter'></span></a>
<div id='pens'><a href="https://codepen.io/collection/DgYoEw/" target="_blank"><span class='fa fa-codepen'></span></a> my other Pens</div>
</div>
<script>
/* a Pen by DIACO : twitter.com/Diaco_ml || codepen.io/MAW
powered by GSAP : https://www.greensock.com/
*/
var words=['Draggable','ThrowProps','SplitText','MorphSvg','Physics2D','DrawSVG','TweenMax'],
centerT=document.getElementById('center-txt'),leftT=document.getElementById('left-txt');
W1=leftT.offsetWidth,W2=centerT.offsetWidth,tl=new TimelineMax({repeat:-1});
TweenLite.set('#center-txt',{left:W1});
TweenLite.set('#right-txt',{left:W1+W2});
for(var i=0;i<words.length;i++){
centerT.innerHTML=words[i];
var W3=centerT.offsetWidth;
tl.to('#right-txt',1,{x:120,ease:Sine.easeOut},'+=3')
.to('#center-txt',1,{text:{value:words[i]},ease:Sine.easeOut},'-=0.7')
.to('#right-txt',1.7,{x:W3-W2,ease:Bounce.easeOut},'-=0.1')
};
// a Pen by DIACO : twitter.com/Diaco_ml || codepen.io/MAW
</script>
body{
background-color:#222;
color:white;
font-size:21px;
overflow:hidden;
}
#content{
position:absolute;
left:50%;top:50%;
transform:translate(-50%,-50%);
white-space: nowrap;
width:300px;
}
#content div{ position:absolute; font-family: tahoma;}
#center-txt{ color:#88CE02;}
#textS{
color:#000;
position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
font-family:'Oswald', tahoma; font-size:40vw;
text-align:center; white-space: nowrap;
opacity:0.2;
}
#links{position:absolute;bottom:0px;left:0px;width:100%;height:50px;font-size:13px;font-family:tahoma;color:#fff;}
#links a{text-decoration:none;font-size:2.3em;color:#fff;}
#twitter{position:absolute;bottom:15px;right:20px;}
#pens{position:absolute;bottom:15px;left:20px;}
