<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ----------> <div id="demo"><span class="color-1">H</span><span class="color-2">e</span><span class="color-3">l</span><span class="color-4">l</span><span class="color-1">o</span><span class="color-2">&nbsp</span><span class="color-2">Y</span><span class="color-3">o</span><span class="color-4">u</span><span class="color-1">!</span></div> <script> </script>

@import url("https://fonts.googleapis.com/css?family=Bungee+Inline"); body { font-family: 'Bungee Inline', sans-serif; } #demo { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: absolute; top: 0; left: 0; height: 100%; width: 100%; } #demo span { font-size: 10vw; font-weight: 400; } .color-1 { color: #ff6347; } .color-2 { color: #bada55; } .color-3 { color: #ff1493; } .color-4 { color: #09a; }

'use strict'; var letters = $('#demo span'); TweenMax.staggerFrom(letters, 0.25, { opacity: 0, y: 200, ease: Back.easeOut }, 0.08);