<script src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/255459/TweenMax.min.js"></script>
<script src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/255459/CSSPlugin.min.js"></script>

<script src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/255459/BezierPlugin.min.js"> </script>

<script src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/255459/TextPlugin.min.js"></script>


<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/255459/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Paytone+One" rel="stylesheet">
 <div class = "poemBody">

<h1 id = quell> 
In
</h1>
<h1 id = quellTwo>
Side
</h1>
<h1 id = quellThree>
Each of us is a portal to
</h1>
<h1 id = quellFour>
God and the sun
</h1>
<h1 id = quellFive>
We've mistaken our masks and weapons
<h1 id = quellSix>
For our mouths and lungs
</h1>
<h1 id = quellSeven>
Confused what's been done to us
</h1>
<h1 id = quellEight>
With what we've become</h1>

</div>
body {
/*background-color: #0F3B72;
color: #fffff8;*/
background:#fcfcfc;
       color:#444;
       width:92%;
/*            padding:20px 0; */
           margin:0 auto;
           transform: scale(.35);
  transform-origin: 0 0;

}
   function slabTextHeadlines() {
         $("h1").slabText({
             // Don't slabtext the headers if the viewport is under 380px
             "viewportBreakpoint":380
         });
     };
     // Load fonts using google font loader
     var WebFontConfig = {
         google: { families: [ 'Open+Sans:400,700:latin', 'Oswald:700:latin' ] },
         // slabText the headers when the font has finished loading (or not)
         fontactive: slabTextHeadlines,
         fontinactive: slabTextHeadlines
     };
     (function() {
         var wf = document.createElement('script');
         wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
         wf.type = 'text/javascript';
         wf.async = 'true';
         var s = document.getElementsByTagName('script')[0];
         s.parentNode.insertBefore(wf, s);
     })();
$(window).load(function() {
var silence = $("#silence"),
of = $("#of"),
the = $("#the"),
transformation = $("#transformation"),
draggable = $("#draggable"),
draggable1 = $("#draggable1"),
draggable2 = $("#draggable2"),
draggable3 = $("#draggable3"),
into = $("#into")


tl = new TimelineMax;

tl.from(silence, 1, {top:"-100px", ease:Back.easeOut})
  
TweenMax.to('#quell', 1,{x:250,y:10})
TweenMax.to('#quellTwo', 1, {x:50,y:0, delay:1.5})
TweenMax.to('#quellThree', 1,{x:50,y:0, delay: 3})
TweenMax.to('#quellFour', 1,{x:100,y:0, delay: 5})
TweenMax.to('#quellFive', 1, {x:50,y:0, delay: 5.5})
TweenMax.to('#quellSix', 1,{x:10,y:0, delay: 6.5})
TweenMax.to('#quellSeven', 1,{x:10,y:0, delay: 7.5})
TweenMax.to('#quellEight', 1, {x:210,y:90, width:.1, delay:9})






});

External CSS

  1. https://s3-us-west-2.amazonaws.com/s.cdpn.io/255459/slabtext.css

External JavaScript

  1. https://s3-us-west-2.amazonaws.com/s.cdpn.io/255459/jquery.slabtext.min.js