cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <head>
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:300,400' rel='stylesheet' type='text/css'>
</head>

<body>
<div class="container">
  
  <div class="titlecard">
    <div class="text">
      <h1>Anagoge</h1>
      <p>by <a href="http://sarahdrasnerdesign.com" target="_blank">Sarah Drasner</a><br>
        <a href="https://twitter.com/sarah_edo" target="_blank">@sarah_edo</a></p>
    </div><!--text-->
  </div>

  <div class="dance">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div><!--dance-->

  <div class="grid"></div>

  <div class="ender">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div><!--ender-->

  <div class="cloud1"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/cloud1-1.png"></div>
  <div class="cloud2"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/cloud2-2.png"></div>

  <div class="womanjump"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/woman-jump.png"></div>

  <svg class="paper" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" preserveAspectRatio="xMidYMid meet" viewBox="0 0 80 34.358" enable-background="new 0 0 80 34.358" xml:space="preserve">
    <polygon opacity="0.73" fill="none" stroke="#F9F9F9" stroke-width="0.75" stroke-miterlimit="10" points="9.725,15.854 78.933,1.416 27.892,32.291 "/>
    <polygon opacity="0.73" fill="none" stroke="#F9F9F9" stroke-width="0.75" stroke-miterlimit="10" points="5.615,10.554 1.172,1.47 78.933,1.416 "/>
    <polyline opacity="0.73" fill="none" stroke="#F9F9F9" stroke-width="0.75" stroke-miterlimit="10" points="9.528,15.806 7.779,24.072 78.933,1.416 5.563,10.447 7.779,24.072 "/>
  </svg>

  <svg class="manypapers" xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" preserveAspectRatio="xMidYMid meet" viewBox="0 0 237 247.4" enable-background="new 0 0 237.014 247.411" xml:space="preserve"><polygon opacity="0.7" fill="none" stroke="#F9F9F9" stroke-width="0.8" stroke-miterlimit="10" points="22.7 66.5 116.3 122.2 26.2 104.1 "/><polygon opacity="0.7" fill="none" stroke="#F9F9F9" stroke-width="0.8" stroke-miterlimit="10" points="23.5 56.2 28 41.2 116.3 122.2 "/><polyline opacity="0.7" fill="none" stroke="#F9F9F9" stroke-width="0.8" stroke-miterlimit="10" points="22.5 66.2 11.9 73.8 116.3 122.2 23.6 56 11.9 73.8 "/><polygon opacity="0.7" fill="none" stroke="#F9F9F9" stroke-width="0.8" stroke-miterlimit="10" points="23.4 178 117 122.2 58.1 192.8 "/><polygon opacity="0.7" fill="none" stroke="#F9F9F9" stroke-width="0.8" stroke-miterlimit="10" points="14.7 172.3 3.7 161.3 117 122.2 "/><polyline opacity="0.7" fill="none" stroke="#F9F9F9" stroke-width="0.8" stroke-miterlimit="10" points="23.1 178 24.7 190.9 117 122.2 14.6 172.2 24.7 190.9 "/><polygon opacity="0.7" fill="none" stroke="#F9F9F9" stroke-width="0.8" stroke-miterlimit="10" points="116.4 232.5 117.2 123.5 147.1 210.5 "/><polygon opacity="0.7" fill="none" stroke="#F9F9F9" stroke-width="0.8" stroke-miterlimit="10" points="107.1 237 92 240.7 117.2 123.5 "/><polyline opacity="0.7" fill="none" stroke="#F9F9F9" stroke-width="0.8" stroke-miterlimit="10" points="116.3 232.8 128.2 238.1 117.2 123.5 106.9 237 128.2 238.1 "/><polygon opacity="0.7" fill="none" stroke="#F9F9F9" stroke-width="0.8" stroke-miterlimit="10" points="215.6 171.3 117.9 123.2 209.2 134.1 "/><polygon opacity="0.7" fill="none" stroke="#F9F9F9" stroke-width="0.8" stroke-miterlimit="10" points="215.6 181.7 212.4 196.9 117.9 123.2 "/><polyline opacity="0.7" fill="none" stroke="#F9F9F9" stroke-width="0.8" stroke-miterlimit="10" points="215.8 171.6 225.8 163.2 117.9 123.2 215.6 181.8 225.8 163.2 "/><polygon opacity="0.7" fill="none" stroke="#F9F9F9" stroke-width="0.8" stroke-miterlimit="10" points="206.4 58.7 117.6 121.8 170.6 46.7 "/><polygon opacity="0.7" fill="none" stroke="#F9F9F9" stroke-width="0.8" stroke-miterlimit="10" points="215.5 63.7 227.4 73.8 117.6 121.8 "/><polyline opacity="0.7" fill="none" stroke="#F9F9F9" stroke-width="0.8" stroke-miterlimit="10" points="206.7 58.7 204.1 45.9 117.6 121.8 215.6 63.8 204.1 45.9 "/><polygon opacity="0.7" fill="none" stroke="#F9F9F9" stroke-width="0.8" stroke-miterlimit="10" points="115.9 12.5 116.2 121.5 85.5 34.8 "/><polygon opacity="0.7" fill="none" stroke="#F9F9F9" stroke-width="0.8" stroke-miterlimit="10" points="125.2 8 140.3 4.1 116.2 121.5 "/><polyline opacity="0.7" fill="none" stroke="#F9F9F9" stroke-width="0.8" stroke-miterlimit="10" points="116.1 12.3 104.1 7 116.2 121.5 125.4 8 104.1 7 "/></svg>


  <div class="ball"></div>

  <div class="scene">
    <div class="boy"></div>
  </div><!--scene-->

  <svg id="geoface" xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" width="170" height="217" viewBox="0 0 170 217" enable-background="new 0 0 170 217" xml:space="preserve">
    <path display="none" fill="none" stroke="#91A1A1" stroke-miterlimit="10" d="M98.9 233.1c-4.2 5.1-38.5-16-76.5-47.3 -38.1-31.2-65.5-60.7-61.3-65.9 4.2-5.1 38.5 16 76.5 47.3C75.7 198.5 103.1 228 98.9 233.1z"/>
    <path fill="none" stroke="#E04636" stroke-width="1.5" stroke-miterlimit="10" d="M96.1 28.8c-2.2-4.1-4.5-8.4-6.8-12.9 0 0 0 0 0 0 -9-2.5-17.2-5.1-24.9-7.5 -3.6-2.1-7.1-4.1-10.6-6.2 0 0 0 0 0 0 0 0 0 0 0 0 0.6 14.5 0.5 27.8-0.2 40 -7.3 15.4-16.3 30.6-27.7 45.5 0 0 0 0 0 0 0 0 0 0 0 0h0c-5.9 20-13.1 37.1-20.4 52.6 0 0 0 0 0 0 0 0 0 0 0 0 9.6 8.7 20 17.8 31.2 29 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 12.3 4.2 23.9 9.6 34.8 15.9 5.4 5.9 10.9 12.3 16.3 19.3l0 0c0 0 0 0 0 0 10.3-2 19.5-4.3 28.6-7.5l0 0 0 0c5.5-6.3 11.3-13 17.7-20.1 4.4-4.5 9-9.1 14-13.9 0 0 0 0 0 0 2.4-6.3 5.1-12.5 8-18.5 0 0 0 0 0 0 0 0 0 0 0 0 -0.8-2.3-1.6-4.5-2.5-6.6 3.4-10.2 7.1-19.6 11.1-28.6 0 0 0 0 0 0s0 0 0 0c-5.8-10-12.2-19.4-19.3-29.4l0 0 0 0c-8.2-11-17.2-22.9-27.1-37.7l0 0c0 0 0 0 0 0C110.7 38.3 103.2 33.8 96.1 28.8zM37.1 169.5c3.7 0.6 7.2 1.3 10.7 2 13.4 2.8 25.5 6.6 36.7 10.9 7.5 2.7 14.7 5.7 21.5 8.7 1.5 0.7 2.9 1.3 4.4 2 -4.5-0.2-9.1-0.5-13.9-0.9 -5-0.4-10.1-0.8-15.6-1.2 -1.1-0.7-2.2-1.4-3.3-2.1C65.1 181 51.6 174.5 37.1 169.5zM161.2 107.9c-2.2-0.9-4.4-1.9-6.5-2.8 -6.6-5.9-13.3-11.9-20.2-18.3 3.6-2.2 7.3-4.4 11.2-6.6 7.1 10 13.5 19.3 19.3 29.3C163.7 108.9 162.4 108.4 161.2 107.9zM130.1 168.4c-1.4-2.8-2.8-5.5-4.2-8.1 9.4-4.4 19.2-9.5 30.3-15.5 -8.5 10.8-15.7 21.5-21.9 32.3C132.9 174.1 131.5 171.2 130.1 168.4zM128.1 85.1c2.1 0.6 4.1 1.1 6.2 1.6 -14.3 6.6-26.6 13-38.8 19.4 -10.2-13.9-20.5-28.3-30.6-46.1C84.4 69.8 104.9 78.9 128.1 85.1zM115.3 71.1c6.3 5.6 12.7 10.7 19 15.5 -25.7-6.2-48.1-16-69.2-26.6 15.2 3.2 30.9 6.9 48.6 9.6C114.2 70.1 114.7 70.6 115.3 71.1zM134.5 86.8c6.8 6.4 13.6 12.3 20.1 18.2 -4.5 2.1-8.7 4-12.8 6 -2.2-8.3-4.6-16.2-7.3-24.2C134.5 86.8 134.5 86.8 134.5 86.8zM121.8 109.5c-9-0.9-17.6-2.1-26.2-3.4 12.2-6.4 24.5-12.8 38.8-19.4 2.8 8.1 5.2 16 7.3 24.3C134.8 110.7 128.2 110.2 121.8 109.5zM99.9 106.8c13.3 1.9 27 3.6 41.8 4.3 -6.2 15.1-11.7 31.2-15.9 49.1 -9.8-20.8-20-37.1-30.3-54C97 106.4 98.4 106.6 99.9 106.8zM84.5 182.3c-15.6-20.1-31.1-34.7-45.8-47.9 21.9-10.1 39.1-19.2 56.8-28.2C90.8 130.4 85.9 154.3 84.5 182.3zM44.5 121.4c8.2-18.7 15.4-38.8 20.3-61.4 10.1 17.9 20.4 32.2 30.6 46.2 -17.7 9-34.9 18.1-56.8 28.2C40.7 130.1 42.6 125.8 44.5 121.4zM113.8 69.7c10.1 4.1 20.6 7.6 31.8 10.4 -0.8 0.4-1.5 0.9-2.3 1.3 -3.1 1.8-6 3.5-8.9 5.3 -0.2-0.1-0.4-0.3-0.6-0.4C127.1 81.2 120.4 75.7 113.8 69.7zM101.8 174c-5.6 3-11.3 5.7-17.3 8.3 0.1-2.5 0.3-5 0.5-7.5 1.8-24.8 6.3-46.6 10.5-68.6 10.3 16.9 20.4 33.2 30.3 54C117.5 165.3 109.8 169.8 101.8 174zM36.9 169.4c-0.2-11.9 0.6-23.2 1.8-34.9 8.6 7.7 17.4 15.8 26.4 25.3 6.4 6.8 12.9 14.2 19.4 22.6C70.3 176.9 54.7 172.3 36.9 169.4zM73.8 38.8c9.7 3.5 19.9 7 31.1 10 1.2 2.8 2.4 5.6 3.5 8.3 1.8 4.3 3.6 8.4 5.2 12.4 -17.8-2.7-33.4-6.5-48.7-9.7 -2.2-8.3-4.5-17.1-6.9-26.9C63.1 34.9 68.3 36.9 73.8 38.8zM117.8 47.3c-1.2 7.6-2.6 15-4.2 22.2 -2.7-6.5-5.6-13.3-8.7-20.6 0.7-0.3 1.3-0.7 2-1 3.8-1.9 7.6-3.7 11.7-5.5C118.3 44.1 118.1 45.7 117.8 47.3zM134.2 177.1c-6.4 7-12.2 13.7-17.7 20.1 -2-1.4-4-2.7-6-4 0 0 0 0 0 0v0c-7.9-3.7-16.2-7.2-25.1-10.5 -0.3-0.1-0.6-0.2-0.8-0.3 6.7-2.9 13-6 19.3-9.4 7.2-3.9 14.4-8 21.9-12.7 2.1 3.9 4.2 7.9 6.2 12.2C132.8 174 133.5 175.5 134.2 177.1zM27.6 95.7c-0.6-2.6-1.1-5.2-1.6-7.9 15-10.4 27.3-19.6 38.8-27.8 -6.1 27.9-15.7 52-26.2 74.3C34.2 122.1 30.7 109.9 27.6 95.7zM26.1 87.7c11.3-14.8 20.3-30 27.6-45.3l0 0c1.5-3.1 2.9-6.2 4.2-9.3 2.4 9.8 4.7 18.6 6.9 26.9C53.3 68.1 41.1 77.3 26.1 87.7zM67.4 12.2c11.6 14.4 24.1 26.5 37.4 36.6 -9.2-2.5-17.8-5.3-26-8.2 -7.2-2.5-14.1-5.2-20.8-7.7 2.5-8 4.7-16.1 6.5-24.4C65.4 9.8 66.4 11 67.4 12.2zM101.9 39.2c-1.9-3.3-3.8-6.7-5.7-10.3 7.1 4.9 14.5 9.4 22.4 13.4 -4 1.8-7.9 3.6-11.6 5.5C105.3 45 103.6 42.2 101.9 39.2zM118.6 42.4c9.8 14.7 18.8 26.6 27 37.6 -6.9-1.7-13.5-3.6-19.9-5.9 -4.1-1.4-8.1-2.9-12-4.5 1.3-5.9 2.5-11.9 3.5-18C117.7 48.6 118.2 45.5 118.6 42.4zM153.9 138c-3.8-9.7-7.8-18.5-12.1-26.9 4.1-1.9 8.4-3.9 12.8-6 2.9 1.3 5.9 2.6 8.9 3.8 0.5 0.2 1 0.4 1.5 0.6C161 118.4 157.2 127.8 153.9 138zM156.3 144.7c-11.2 6-21 11.1-30.4 15.5 4.1-17.9 9.7-34 15.9-49.1 0.4 0.8 0.9 1.7 1.3 2.5 3.8 7.7 7.4 15.6 10.8 24.4l0 0C154.7 140.2 155.5 142.4 156.3 144.7zM134.4 176.9c0.4-0.7 0.8-1.4 1.2-2.1 5.9-10 12.7-20 20.5-29.9 -2.9 5.9-5.5 12-7.9 18.3C143.3 167.9 138.8 172.5 134.4 176.9zM88 204.7c-2.4-4.7-4.8-9.2-7.1-13.5 10.8 0.8 20.4 1.6 29.6 2 1.9 1.2 3.8 2.5 5.6 3.8 0.1 0.1 0.2 0.1 0.3 0.2C107.4 200.4 98.3 202.7 88 204.7zM87.8 204.5c-5.3-6.9-10.7-13.2-16-19 3.1 1.8 6.1 3.7 9.1 5.7 0.6 1.1 1.2 2.2 1.8 3.3C84.3 197.7 86.1 201 87.8 204.5zM5.7 140.4c12-2.5 22.8-4.5 32.9-6 -0.2 1.6-0.3 3.1-0.4 4.6 -0.9 10.1-1.5 20-1.4 30.3C25.6 158.1 15.2 149.1 5.7 140.4zM26 87.9c3.4 17.7 7.4 32.1 12.6 46.4 -10.1 1.5-20.9 3.5-32.9 6C12.9 124.9 20.1 107.9 26 87.9zM53.7 42.2C54.3 30.1 54.5 17 53.9 2.7c0.2 1.1 0.3 2.2 0.5 3.2 1.4 9.6 2.6 18.6 3.5 27 -0.4 0.9-0.7 1.7-1.1 2.6C55.8 37.7 54.7 39.9 53.7 42.2zM64.4 8.5c-0.8 3.9-1.8 7.7-2.7 11.5 -1.1 4.3-2.4 8.6-3.7 12.8 -0.8-6.9-1.7-14.1-2.8-21.8 -0.4-2.8-0.8-5.7-1.3-8.7C57.3 4.4 60.8 6.5 64.4 8.5zM89.3 16c6.1 12 12 22.4 17.6 31.8 -0.7 0.3-1.3 0.7-2 1C90.5 37.9 76.9 24.6 64.5 8.5 72.2 10.9 80.3 13.5 89.3 16z"/>
    <path fill="none" stroke="#91A1A1" stroke-width="0.8" stroke-miterlimit="10" d="M87.8 119.5l38.4-16.8 -1 25.2L87.8 119.5zM125.2 127.9l-37.4-8.4 -18 45.4L125.2 127.9zM69.8 164.9l18-45.4L33.6 108.2 69.8 164.9zM69.8 164.9L33.6 108.2l-3.1 46.4L69.8 164.9zM30.6 154.5l3.1-46.4 -23.1 3.9L30.6 154.5zM10.5 112.1l23.1-3.9 -9.4-33.4L10.5 112.1zM58.4 57.3L24.3 74.7l9.4 33.4L58.4 57.3zM52.4 51.3l-28.1 23.4 34.2-17.4 22.5-10.8L52.4 51.3zM68.7 184.2l1.1-19.4 -39.2-10.3L68.7 184.2zM69.8 164.9l42.9-16.9 12.5-20L69.8 164.9zM111 166.4l-42.3 17.9 13.6 13.3L111 166.4z"/>
    <path fill="none" stroke="#91A1A1" stroke-width="0.8" stroke-miterlimit="10" d="M25.4 75.5l21.4-17.9 8.2-15 31.1 1.8 22.4 9.2 15.1 5.6 8.8 10.9 -1.3 5.9 11.3 21.1 -8.5 34.1 -10.1 37.5 -15.2 11.9 -2.3 8.9 -24.1 6.4L71.8 200.5l-9.2-22.5 -31.1-24.2 -19.7-41.6L25.4 75.5zM58.4 57.3l29.4 62.2 16.2-53.4L58.4 57.3zM87.8 119.5L58.4 57.3 33.6 108.2 87.8 119.5zM126.2 102.7L104 66.2l-16.2 53.4L126.2 102.7zM69.8 164.9l-1.1 19.4 42.3-17.9 1.7-18.4L69.8 164.9z"/>
    <path fill="none" stroke="#91A1A1" stroke-width="0.8" stroke-miterlimit="10" d="M62.3 179.2l6.4 5 2.9 18L62.3 179.2z"/>
    <path fill="none" stroke="#91A1A1" stroke-width="0.8" stroke-miterlimit="10" d="M71.7 202.2l-2.9-18 13.6 13.3L71.7 202.2z"/>
    <path fill="none" stroke="#91A1A1" stroke-width="0.8" stroke-miterlimit="10" d="M112.7 147.9l12 21.9 -13.7-3.5L112.7 147.9z"/>
    <path fill="none" stroke="#91A1A1" stroke-width="0.8" stroke-miterlimit="10" d="M82.3 197.6l28.7-31.2 2.1 0.5 -6.2 24.1L82.3 197.6z"/>
    <path fill="none" stroke="#91A1A1" stroke-width="0.8" stroke-miterlimit="10" d="M109.2 182l3.9-15.1 11.6 2.9L109.2 182z"/>
    <path fill="none" stroke="#91A1A1" stroke-width="0.8" stroke-miterlimit="10" d="M125.2 127.9l9.8 3.6 -22.3 16.4L125.2 127.9z"/>
    <path fill="none" stroke="#91A1A1" stroke-width="0.8" stroke-miterlimit="10" d="M124.8 169.8l-12-21.9 22.3-16.4L124.8 169.8z"/>
    <path fill="none" stroke="#91A1A1" stroke-width="0.8" stroke-miterlimit="10" d="M104 66.2l5.1-13.8 24.4 16.8L104 66.2z"/>
    <path fill="none" stroke="#91A1A1" stroke-width="0.8" stroke-miterlimit="10" d="M58.4 57.3l22.5-10.8 5.3-3.4 22.9 9.3 -5.1 13.8L58.4 57.3z"/>
    <path fill="none" stroke="#91A1A1" stroke-width="0.8" stroke-miterlimit="10" d="M54.5 41.2l-2.1 10.1 -6.3 5.2L54.5 41.2z"/>
    <path fill="none" stroke="#91A1A1" stroke-width="0.8" stroke-miterlimit="10" d="M86.2 43.1l-5.3 3.4 -28.6 4.8 2.1-10.1L86.2 43.1z"/>
    <path fill="none" stroke="#91A1A1" stroke-width="0.8" stroke-miterlimit="10" d="M133.5 69.2l-24.4-16.8 15.4 5.7L133.5 69.2z"/>
    <path fill="none" stroke="#91A1A1" stroke-width="0.8" stroke-miterlimit="10" d="M104 66.2l29.5 3.1 -7.3 33.5L104 66.2z"/>
    <path fill="none" stroke="#91A1A1" stroke-width="0.8" stroke-miterlimit="10" d="M125.2 127.9l1-25.2 10.7 1.7L125.2 127.9z"/>
    <path fill="none" stroke="#91A1A1" stroke-width="0.8" stroke-miterlimit="10" d="M143.7 96.8l-6.8 7.7 -10.7-1.7 6-27.5L143.7 96.8z"/>
    <path fill="none" stroke="#91A1A1" stroke-width="0.8" stroke-miterlimit="10" d="M125.2 127.9l11.7-23.4 6.8-7.7 -8.7 34.8L125.2 127.9z"/>
    <path fill="none" stroke="#FAFCFC" stroke-width="0.8" stroke-miterlimit="10" d="M136.4 167.9v0l0 0 5.6-43.1 0 0 0 0 4.4-39 0 0v0L130.7 64.2l0.5-6.8 0 0 0 0 -11.4-10.8 0 0 -17.6-3.9 -26.2-6.8 0 0v0l-34.7 2.6 0 0 0 0 -6.9 17.8L13.4 79.2v0 0h0l-9.5 42.5 0 0v0l27.9 43.2h0v0 0l38 22.2 13.5 23.6h0l0 0 10.9-6.6 25.7-10.7 0 0 1.2-10.1L136.4 167.9zM38.4 52.1l2.2-2.4 15.3-4.7 14.8-4.5 -4.1 2.7L48 55.4 20.7 74.2l-7.1 4.9L38.4 52.1zM146.3 85.9l-4.4 38.9 -11.1-2.5 9.3-27.1 4-5.9L146.3 85.9zM102.3 42.7l28.8 14.7 -32.3 0.9 1.7-7.8L102.3 42.7zM76 170.4l12.9-51.7 41.8 3.7 -4.5 3.9L76 170.4zM120.1 145.9l-43.9 24.5 54.5-47.9 -9.7 21.5L120.1 145.9zM130.8 122.2l-2.6-27.3 11.8 0.3 -9.2 26.9L130.8 122.2zM128.2 94.9l2.6 27.4 -41.7-3.7 22.8-13.8L128.2 94.9zM89 118.6l9.8-60.2 29.4 36.4 -35.4 21.4L89 118.6zM88.9 118.6l-60.4-4.5 19.5-58.7L88.9 118.6zM28.5 114.2l60.4 4.5 -13 51.8 -38.4-45.6L28.5 114.2zM130.5 123l0.3-0.7 8.9 2 2.2 0.5 -21.7 20.9L130.5 123zM98.7 58.4l-9.8 60.2L51.8 61.1l-3.7-5.7 21 1.2L98.7 58.4zM48 55.5l-8.1 24.5 -11.4 34.2L13.5 79.2 48 55.5zM77.6 191.6l-1.6-21.1 44.1-24.6 0.5 12.4 0.3 7.8 -27.8 16.4L77.6 191.6zM136.3 167.9l-13-1.5 -2.3-0.3 -0.8-20.1 13.3 18.1L136.3 167.9zM101.3 46.8l-2.6 11.5 -27.1-1.6 -23.5-1.4 0.7-0.5 22.1-14.5 0 0 0 0 5.2-4.5 26.1 6.8L101.3 46.8zM28.5 114.2l47.4 56.2 -44-5.5 -0.5-7.7L28.5 114.2zM75.9 170.5l1.6 21.1 -7.7-4.5 0 0 -37.9-22.1L75.9 170.5zM94.3 204.1l-16.6-12.4 20.3-11.9 23-13.5L96.3 201.2 94.3 204.1zM123.3 166.4l13 1.5 -15 15.3 1.1-8.8L123.3 166.4zM131 160.6l-10.8-14.7 8.5-8.2 13.3-12.8 -5.6 42.9L131 160.6zM146.3 85.8l-0.9 1.3 -5.4 8 -11.8-0.3 2.5-30.6L146.3 85.8zM130.6 64.2L130.6 64.2l-2.2 27.6 -0.2 3L98.8 58.4l32.4-0.9L130.6 64.2zM119.8 46.7l11.2 10.6 -26.7-13.6 -1.9-1L119.8 46.7zM76 35.9l-0.2 0.2 -4.9 4.2 -30.3 9.3 0.8-11.2L76 35.9zM40.7 46.8l-0.2 2.9 -5.9 6.5 6.8-17.5L40.7 46.8zM13.5 79.3l13 30.2 2 4.6 -24.5 7.6L13.5 79.3zM4 121.8l24.5-7.6 3.4 50.7L4 121.8zM75.5 190.5l2.1 1.2 5.1 17 0.6 1.9 -13.3-23.3L75.5 190.5zM83.4 210.7l-1.6-5.1 -4.2-13.9 8.8 6.6 7.7 5.8L83.4 210.7zM94.3 204.1l26.6-37.9 2.3 0.3 -3.3 27L94.3 204.1z"/>
    <path fill="none" stroke="#91A1A1" stroke-width="0.8" stroke-miterlimit="10" d="M89.7 16.4c-0.2 0.3-0.6 0.3-0.8 0.1 -0.3-0.2-0.3-0.6-0.1-0.8 0.2-0.2 0.6-0.3 0.8-0.1C89.9 15.7 90 16.1 89.7 16.4z"/>
    <path fill="none" stroke="#91A1A1" stroke-width="0.8" stroke-miterlimit="10" d="M65.5 9.4c-0.3 0.3-0.8 0.4-1.1 0.1 -0.3-0.3-0.4-0.8-0.1-1.1 0.3-0.3 0.8-0.4 1.1-0.1C65.7 8.5 65.8 9 65.5 9.4z"/>
    <path fill="none" stroke="#91A1A1" stroke-width="0.8" stroke-miterlimit="10" d="M119.2 42.9c-0.3 0.3-0.8 0.4-1.1 0.1 -0.3-0.3-0.4-0.8-0.1-1.1 0.3-0.3 0.8-0.4 1.1-0.1C119.5 42.1 119.5 42.6 119.2 42.9z"/>
    <path fill="none" stroke="#91A1A1" stroke-width="0.8" stroke-miterlimit="10" d="M120.6 47.3c-0.2 0.3-0.6 0.3-0.8 0.1 -0.2-0.2-0.3-0.6-0.1-0.8 0.2-0.2 0.6-0.3 0.8-0.1C120.7 46.6 120.8 47 120.6 47.3z"/>
    <path fill="none" stroke="#91A1A1" stroke-width="0.8" stroke-miterlimit="10" d="M146.2 80.5c-0.3 0.3-0.8 0.4-1.1 0.1 -0.3-0.3-0.4-0.8-0.1-1.1 0.3-0.3 0.8-0.4 1.1-0.1C146.4 79.7 146.5 80.2 146.2 80.5z"/>
    <path fill="none" stroke="#91A1A1" stroke-width="0.8" stroke-miterlimit="10" d="M76.4 36.6c-0.3 0.3-0.8 0.4-1.1 0.1 -0.3-0.3-0.4-0.8-0.1-1.1 0.3-0.3 0.8-0.4 1.1-0.1C76.6 35.8 76.6 36.3 76.4 36.6z"/>
    <path fill="none" stroke="#91A1A1" stroke-width="0.8" stroke-miterlimit="10" d="M37.1 169.9c-0.2 0.3-0.6 0.3-0.8 0.1 -0.2-0.2-0.3-0.6-0.1-0.8 0.2-0.3 0.6-0.3 0.8-0.1C37.2 169.3 37.3 169.7 37.1 169.9z"/>
    <path fill="none" stroke="#91A1A1" stroke-width="0.8" stroke-miterlimit="10" d="M121.1 146.8c-0.3 0.3-0.8 0.4-1.1 0.1 -0.3-0.3-0.4-0.8-0.1-1.1 0.3-0.3 0.8-0.4 1.1-0.1C121.3 145.9 121.3 146.4 121.1 146.8z"/>
    <path fill="none" stroke="#91A1A1" stroke-width="0.8" stroke-miterlimit="10" d="M131.4 122.8c-0.2 0.3-0.6 0.3-0.8 0.1 -0.2-0.2-0.3-0.6-0.1-0.8 0.2-0.3 0.6-0.3 0.8-0.1C131.6 122.2 131.6 122.5 131.4 122.8z"/>
    <path fill="none" stroke="#91A1A1" stroke-width="0.8" stroke-miterlimit="10" d="M140.6 95.7c-0.3 0.3-0.8 0.4-1.1 0.1 -0.3-0.3-0.4-0.8-0.1-1.1 0.3-0.3 0.8-0.4 1.1-0.1C140.8 94.9 140.9 95.4 140.6 95.7z"/>
    <path fill="none" stroke="#91A1A1" stroke-width="0.8" stroke-miterlimit="10" d="M142.2 125c-0.2 0.3-0.6 0.3-0.8 0.1 -0.2-0.2-0.3-0.6-0.1-0.8 0.2-0.2 0.6-0.3 0.8-0.1C142.3 124.4 142.4 124.7 142.2 125z"/>
    <path fill="none" stroke="#91A1A1" stroke-width="0.8" stroke-miterlimit="10" d="M48.9 56c-0.4 0.4-1 0.5-1.5 0.1 -0.4-0.4-0.5-1-0.1-1.5 0.4-0.4 1-0.5 1.5-0.1C49.2 54.9 49.3 55.6 48.9 56z"/>
    <path fill="none" stroke="#91A1A1" stroke-width="0.8" stroke-miterlimit="10" d="M148.5 87.6c-1 1.2-2.7 1.4-3.9 0.4 -1.2-1-1.4-2.7-0.4-3.9s2.7-1.4 3.9-0.4C149.3 84.7 149.4 86.4 148.5 87.6z"/>
    <path fill="none" stroke="#91A1A1" stroke-width="0.8" stroke-miterlimit="10" d="M6.1 140.8c-0.2 0.3-0.6 0.3-0.8 0.1 -0.2-0.2-0.3-0.6-0.1-0.8 0.2-0.2 0.6-0.3 0.8-0.1C6.3 140.1 6.3 140.5 6.1 140.8z"/>
    <path fill="none" stroke="#91A1A1" stroke-width="0.8" stroke-miterlimit="10" d="M129.2 95.7c-0.5 0.6-1.4 0.7-2 0.2 -0.6-0.5-0.7-1.4-0.2-2 0.5-0.6 1.4-0.7 2-0.2C129.7 94.2 129.7 95.1 129.2 95.7z"/>
    <path fill="none" stroke="#91A1A1" stroke-width="0.8" stroke-miterlimit="10" d="M78 191.9c-0.2 0.3-0.6 0.3-0.8 0.1 -0.2-0.2-0.3-0.6-0.1-0.8 0.2-0.2 0.6-0.3 0.8-0.1C78.2 191.3 78.2 191.7 78 191.9z"/>
    <path fill="none" stroke="#91A1A1" stroke-width="0.8" stroke-miterlimit="10" d="M54.8 3.3c-0.5 0.6-1.4 0.7-2 0.2 -0.6-0.5-0.7-1.4-0.2-2 0.5-0.6 1.4-0.7 2-0.2C55.2 1.8 55.3 2.7 54.8 3.3zM84.3 209.7c-0.6-0.5-1.5-0.4-2 0.2 -0.5 0.6-0.4 1.5 0.2 2 0.6 0.5 1.5 0.4 2-0.2C85 211 84.9 210.2 84.3 209.7zM120.5 192.8c-0.3-0.3-0.8-0.2-1.1 0.1 -0.3 0.3-0.2 0.8 0.1 1.1 0.3 0.3 0.8 0.2 1.1-0.1C120.9 193.6 120.8 193.1 120.5 192.8zM95.2 203.5c-0.3-0.3-0.8-0.2-1.1 0.1 -0.3 0.3-0.2 0.8 0.1 1.1 0.3 0.3 0.8 0.2 1.1-0.1C95.6 204.3 95.5 203.8 95.2 203.5z"/>
    <path fill="none" stroke="#91A1A1" stroke-width="0.8" stroke-miterlimit="10" d="M78.1 172.3c-1 1.2-2.7 1.4-3.9 0.4 -1.2-1-1.4-2.7-0.4-3.9 1-1.2 2.7-1.4 3.9-0.4C78.9 169.3 79.1 171.1 78.1 172.3z"/>
    <path fill="none" stroke="#91A1A1" stroke-width="0.8" stroke-miterlimit="10" d="M42.4 39.5c-0.5 0.6-1.4 0.7-2 0.2 -0.6-0.5-0.7-1.4-0.2-2 0.5-0.6 1.4-0.7 2-0.2C42.8 38 42.9 38.9 42.4 39.5zM15.2 77.1c-1.2-1-2.9-0.8-3.9 0.4 -1 1.2-0.8 3 0.4 3.9 1.2 1 3 0.8 3.9-0.4C16.5 79.8 16.4 78.1 15.2 77.1zM4.8 120.7c-0.6-0.5-1.5-0.4-2 0.2 -0.5 0.6-0.4 1.5 0.2 2 0.6 0.5 1.5 0.4 2-0.2C5.5 122.1 5.4 121.2 4.8 120.7zM29.3 113.1c-0.6-0.5-1.5-0.4-2 0.2 -0.5 0.6-0.4 1.5 0.2 2 0.6 0.5 1.5 0.4 2-0.2C30 114.5 29.9 113.6 29.3 113.1zM103.4 41.7c-0.6-0.5-1.5-0.4-2 0.2 -0.5 0.6-0.4 1.5 0.2 2 0.6 0.5 1.5 0.4 2-0.2C104 43.1 104 42.2 103.4 41.7zM131.9 56.2c-0.6-0.5-1.5-0.4-2 0.2 -0.5 0.6-0.4 1.5 0.2 2 0.6 0.5 1.5 0.4 2-0.2C132.6 57.6 132.5 56.7 131.9 56.2zM58.4 32.3c-0.3-0.3-0.8-0.2-1.1 0.1 -0.3 0.3-0.2 0.8 0.1 1.1 0.3 0.3 0.8 0.2 1.1-0.1C58.8 33.1 58.8 32.6 58.4 32.3zM41 49.1c-0.3-0.3-0.8-0.2-1.1 0.1 -0.3 0.3-0.2 0.8 0.1 1.1 0.3 0.3 0.8 0.2 1.1-0.1C41.4 49.8 41.4 49.3 41 49.1zM99.3 57.8c-0.3-0.3-0.8-0.2-1.1 0.1 -0.3 0.3-0.2 0.8 0.1 1.1 0.3 0.3 0.8 0.2 1.1-0.1C99.7 58.5 99.6 58.1 99.3 57.8zM89.8 117.5c-0.6-0.5-1.5-0.4-2 0.2 -0.5 0.6-0.4 1.5 0.2 2 0.6 0.5 1.5 0.4 2-0.2C90.5 118.9 90.4 118 89.8 117.5zM32.7 163.8c-0.6-0.5-1.5-0.4-2 0.2 -0.5 0.6-0.4 1.5 0.2 2 0.6 0.5 1.5 0.4 2-0.2C33.4 165.2 33.3 164.3 32.7 163.8z"/>
    <path fill="none" stroke="#91A1A1" stroke-width="0.8" stroke-miterlimit="10" d="M156.8 145.4c-0.3 0.3-0.8 0.4-1.1 0.1 -0.3-0.3-0.4-0.8-0.1-1.1 0.3-0.3 0.8-0.4 1.1-0.1C157 144.6 157.1 145.1 156.8 145.4z"/>
    <path fill="none" stroke="#91A1A1" stroke-width="0.8" stroke-miterlimit="10" d="M154.7 105.5c-0.2 0.3-0.6 0.3-0.8 0.1 -0.2-0.2-0.3-0.6-0.1-0.8 0.2-0.2 0.6-0.3 0.8-0.1C154.9 104.9 154.9 105.3 154.7 105.5z"/>
    <path fill="none" stroke="#91A1A1" stroke-width="0.8" stroke-miterlimit="10" d="M149.2 163.8c-0.3 0.3-0.8 0.4-1.1 0.1 -0.3-0.3-0.4-0.8-0.1-1.1 0.3-0.3 0.8-0.4 1.1-0.1C149.4 163 149.4 163.5 149.2 163.8z"/>
    <path fill="none" stroke="#91A1A1" stroke-width="0.8" stroke-miterlimit="10" d="M166 110.4c-0.5 0.6-1.4 0.7-2 0.2 -0.6-0.5-0.7-1.4-0.2-2 0.5-0.6 1.4-0.7 2-0.2C166.4 108.9 166.5 109.8 166 110.4z"/>
  </svg>

</div><!--container-->
<div class="top"></div>
</body>
            
          
!
            
              body { 
  background: #b01500; 
  animation: bk-chg 2s 11s ease-in-out both;
  width: 100%;
  height: 100%;
}

@keyframes bk-chg {
    100% { background: #0b0e1e; }
}

.top {
  width:1500px;
  height:1000px;
  top:0;
  left:0;
  position: absolute;
  z-index:5000;
  background: #b01500;
}

.dance {
    width: 300px;
    height: 75px;
    margin: 150px auto 0 470px;
}

.dance div {
    display: inline-block;
    width: 50px;
    height: 27px;
    background: #ec4b0b;
    position: relative;
    z-index: 500;
}

.dance div:before {
    content: "";
    position: absolute;
    top: -17px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-bottom: 17px solid #ec4b0b;
}
.dance div:after {
    content: "";
    position: absolute;
    bottom: -17px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-top: 17px solid #ec4b0b;
}


.ender {
    width: 500px;
    height: 700px;
    position: absolute;
    left: 420px;
    top: 100px;
}

.ender div {
    display: inline-block;
    width: 25px;
    height: 700px;
    background: #8b0b1d;
    position: relative;
    z-index: 75;
}

.ball { 
    background: #0b0e1e;
    border: 1px solid #91a1a1;
    border-radius: 50%;
    width: 115px;
    height: 115px;
    position: absolute;
    z-index: 100;
    transform: translate3d(537px,82px,0);
}

.paper {
    position: absolute;
    z-index: 70;
    width: 80px;
    height: 100%;
    left: 170px;
    top: 60px;
    transform: translateZ(0,0,0);
}

.manypapers {
    position: absolute;
    z-index: 70;
    width: 250px;
    height: 250px;
    transform: translate3d(430px,-120px,0);
    display: none;
}

.boy {
    position: absolute;
    z-index: 50;
    background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/boy-sit.png") left top no-repeat;
    width: 300px;
    height: 271px;
    transform: translate3d(165px,300px,0);
}

.scene {
    position: absolute;
    z-index: 25;
    background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/persp.jpg") left top no-repeat;
    width: 1200px;
    height: 614px;
    top: 0;
    left: 0;
}

#geoface {
    position: absolute;
    z-index: 1000;
    transform: translate3d(134px,-65px,0);
}

.grid {
    background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/grid.jpg") left top no-repeat;
    width: 800px;
    height: 466px;
    position: absolute;
    transform: translate3d(200px,-100px,0);
}

.cloud1, .cloud2 {
    position: absolute;
    z-index: 50;
    top: 0px;
}

.cloud1 {
    left: -100px;
}

.cloud2 {
    right: -100px;
}


.womanjump {
    position: absolute;
    z-index: 300;
    top: 200px;
    left: 400px;
}

.titlecard {
    position: absolute;
    width: 300px;
    left: 450px;
    top: 200px;
    height: 200px;
    background: #5d101e;
    text-align: center;
    font-family: 'Yanone Kaffeesatz', sans-serif;
    padding: 50px;
    z-index: 3000;
    opacity: 0.8;
}

.titlecard h1 {
    font-weight: 400;
    color: #f9e7d6;
    font-size: 40px;
    margin-bottom: 0;
}

.titlecard a { color: #e2937f; }
.titlecard p { color: #ad6651; }

.titlecard p, .titlecard a, .titlecard a:visited {
    font-weight: 300;
    font-size: 30px;
    margin-top: 0;
    font-style: normal;
    text-decoration: none;
}

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) { 
  
    .boy { 
        background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/boy-sit-r.png") left top no-repeat; 
        background-size: 300px 271px;
    }
     
    .scene {
        background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/persp2.jpg") left top no-repeat;
        background-size: 1200px 614px;
    }   
}


            
          
!
            
              // face drawing part
var $geoface = $("#geoface path");

TweenMax.set($geoface, {
  drawSVG: "50% 50%"
});

// $geoface.hide();

// $.wait = function(duration) {
// 	return $.Deferred(function(def) {
// 		setTimeout(def.resolve, duration);
// 	});
// };

// function setToPlay() {
// 	var svgFace = new Vivus('$geoface', {type: 'async', duration: 3000, start: 'manual'});
// 	$geoface.show();
// 	svgFace.play();
// };

//call the set to play
// $.wait(21000).then(setToPlay);


// the rest is in gsap
TweenMax.ticker.fps(60);

var $dances = $(".dance div"),
  $top = $(".top"),
	$ball = $(".ball"),
	$scene = $(".scene"),
  $boy = $(".boy"),
  $paper = $(".paper"),
  $grid = $(".grid"),
  $cloud1 = $(".cloud1"),
  $cloud2 = $(".cloud2"),
  $jump = $(".womanjump"),
  $ender = $(".ender div"),
  $titlecard = $(".titlecard"),
  $text = $(".text");


// the first scene
function sceneOne() {
  var tl = new TimelineLite();
  
  tl.fromTo($top, 1, {autoAlpha:1},{autoAlpha:0})
  .staggerTo( $dances, 2, {scale:0.1, repeat:3, yoyo:true, ease:Power2.easeOut}, 0.1)
	.staggerTo( $dances, 1.5, {rotation:"+=100", autoAlpha:0.4, scale:1.5, ease:Bounce.easeOut}, 0.5, "-=5")
	.staggerTo( $dances, 0.5, {rotation:-100, autoAlpha:0.2, scale:1.9, y:50, ease:Bounce.easeOut},  0.2, "-=5")
	.staggerTo( $dances, 1, { x:100, y:200, position:"absolute" },  0.2)
	.staggerTo( $dances, 1, { rotation:"+=150", autoAlpha:0.8, ease:Power2.easeOut}, 0.2)
	.staggerTo( $dances, 1, { rotation:"+=150", opacity:0, scale:0, ease:Power2.easeOut}, 0.2, "-=3")
	.from( $ball, 5, {autoAlpha:0, background:"#ec4b0b"}, "-=5");

	tl.timeScale(3);

  return tl;
}

// the second scene
function sceneTwo() {
  var tl = new TimelineLite();
  
  	tl.to( $ball, 3, {x:"-=365", y:"-=81", force3D: "auto"})
  	.add("scenein", "-=1.5")
  	.from($boy, 4, {scale:0.1, x:400}, "scenein")
  	.from($scene, 4, {scale:0.3, autoAlpha:0, force3D: "auto", x:2000}, "scenein")
  .to($geoface, 4, {drawSVG:true}, "scenein");
  tl.timeScale(1.5);
  
  return tl;
  
}

// the third scene
function sceneThree() {
  var tl = new TimelineLite();
  
    tl.from($paper, 5, {autoAlpha:0}, "+=1")
  	.to($paper, 4, {x:1000, yoyo:true, scale:2.0, ease:Power2.easeOut}, "-=1")
    .add("sceneout", "-=3.5")
    .to($scene, 3, {x:-2000, scale:0.3, force3D: "auto", ease:Power2.easeIn}, "sceneout-=1" )
    .to($ball, 6, {scale:0, force3D: "auto", ease:Bounce.easeOut}, "sceneout" );
    tl.to($geoface, 1, {opacity:0, scale:0.3, rotation:50, ease:Power2.easeOut}, "sceneout-=1" )
    .from($grid, 4, {scale:0.3, autoAlpha:0, x:2000}, "sceneout")
    .to($paper, 1, {x:200, y:-250, ease:Circ.easeInOut}, "-=2")
    .to($paper, 1, {x:550, top:100, position:"absolute", scale:1.6, rotation:100, ease:Circ.easeInOut}, "-=1");
  
  tl.timeScale(2);

  return tl;
}

// the fourth scene
function sceneFour() {
  var tl = new TimelineLite();
  
    tl.to($paper, 2, {autoAlpha:0, scale:0, y:100, rotation:"-=2000", transformOrigin:"50% 50%", ease:Power2.easeOut}, "-=1")
    .add("liberty", "-=1")
    .fromTo($cloud1, 12, {autoAlpha:0, scale:0.3}, {autoAlpha:0.5, scale:1, x:250, ease:Power2.easeOut}, "liberty")
    .fromTo($cloud2, 12, {autoAlpha:0, scale:0.3}, {autoAlpha:0.5, scale:1, x:-250, ease:Power2.easeOut}, "liberty")
    .fromTo($jump, 4, {autoAlpha:0, scale:0.1, force3D: "auto"}, {autoAlpha:0.85, scale:0.8, y:-200, force3D: "auto", ease:Power4.easeOut}, "liberty")
    .staggerFrom( $ender, 2, {scale:0.1, autoAlpha:0, repeat:3, yoyo:true, ease:Power2.easeOut}, 0.1, "liberty")
    .add("away", "-=5")
    .to($jump, 8, {scale:0.8, autoAlpha:0, y:50, force3D: "auto", ease:Power3.easeIn}, "away")
    .to($grid, 13, {scale:0.8, y:1000, force3D: "auto", ease:Power1.easeIn}, "away")
    .to($cloud1, 5, {autoAlpha:0.85, scale:0.8, x:-400, ease:Power1.easeIn}, "away")
    .to($cloud2, 5, {autoAlpha:0.85, scale:0.8, x:2000, ease:Power1.easeIn}, "away")
    .fromTo($titlecard, 2.2, {autoAlpha:0, scale:0.3}, {autoAlpha:0.9, scale:1, ease:Power4.easeOut}, "-=4")
    .fromTo($text, 2, {autoAlpha:0, scale:0.3}, {autoAlpha:0.9, scale:1, ease:Back.easeInOut}, "-=3.75");

  return tl;
  
  tl.timeScale(1.5);
}


var master = new TimelineLite();
master.add(sceneOne(), "scene1")
      .add(sceneTwo(), "scene2")
      .add(sceneThree(), "scene3")
      .add(sceneFour(), "scene4");

//master.seek("scene2+=3");



            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console