cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

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.

            
              <svg class="monsta" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
  <title>monster self coder</title>
  <ellipse cx="300" cy="417" rx="71" ry="22" id="shadow-2" data-name="shadow" class="cls-3" />
  <path class="cls-4" d="M234 341c7.1 19.1 44 41 44 41v7a3 3 0 0 0 0 6v8s-29.5 10.2-23 21 23.2 4.5 27-3 2-18 2-18v-19s8.4 3 15 3h3c6.6 0 15-3 15-3v19s-1.8 10.5 2 18 20.4 13.8 27 3-23-21-23-21v-8a3 3 0 0 0 0-6v-7s36.9-21.9 44-41-140.1-19.1-133 0z" id="legs_02"
  />
  <path class="cls-4" d="M372.1 115.4c-6.9-2.6-25.5 14.5-36.6 39.6s-8.2 66.7-8.2 66.7 33.3-25.4 44.5-50.5 7.1-53.2.3-55.8zm-144.1 0c-6.9 2.6-10.8 30.7.4 55.8s44.5 50.5 44.5 50.5 3-41.6-8.2-66.7-29.9-42.3-36.8-39.6z" id="ears_10" />
  <path class="cls-5" d="M448.6 266.8c-3.5-5.2-11.6 11-11.6 11s6.1-18.5-1.8-18.4-5.7 18.1-5.7 18.1-3.9-18.6-9.8-15.8 3.8 18.2 3.8 18.2-6.2-5.8-9.7-1.4 13.6 10.8 13.6 10.8 5.4 16.4-14.4 19.3-28.7-22.3-28.7-22.3l-7.3 11.5s9.3 17.5 30.6 17.8 27.5-14 27.9-26.4c4.3-3.7 18.5-14.3 13.1-22.4zM189 308.6c-19.8-2.9-14.4-19.3-14.4-19.3s17.1-6.5 13.6-10.8-9.7 1.4-9.7 1.4 9.8-15.5 3.8-18.2-9.8 15.8-9.8 15.8 2.1-18-5.7-18.1-1.8 18.4-1.8 18.4-8.1-16.2-11.6-11c-5.4 8.1 8.8 18.7 13.1 22.5.4 12.4 6.6 26.7 27.9 26.4s30.6-17.9 30.6-17.9l-7.2-11.5s-8.9 24.8-28.8 22.3z"
  id="arms" />
  <path id="arms-second" class="cls-5" d="M450.9,295.1s18.1-7.2,12.9-13.1-17.6,7.2-17.6,7.2,11.8-14.9,5.8-17.7-11.5,14.6-11.5,14.6,0.5-8.4-5.1-8.3,0.5,17.4.5,17.4-3.1,10.5-22.9,13.4-28.7-22.3-28.7-22.3L377,297.8s9.3,17.5,30.6,17.8,23.8-6.6,33.5-14.3c5.7,0.8,22.9,5,25.7-4.4C468.5,291,450.9,295.1,450.9,295.1ZM189,308.6c-19.8-2.9-14.4-19.3-14.4-19.3s17.1-6.5,13.6-10.8-9.7,1.4-9.7,1.4,9.8-15.5,3.8-18.2-9.8,15.8-9.8,15.8,2.1-18-5.7-18.1-1.8,18.4-1.8,18.4-8.1-16.2-11.6-11c-5.4,8.1,8.8,18.7,13.1,22.5,0.4,12.4,6.6,26.7,27.9,26.4S225,297.8,225,297.8l-7.2-11.5S208.9,311.1,189,308.6Z"/>
  <path id="arms-third" class="cls-5" d="M466.8,319.7c-0.8-7.8-18.7-5.6-18.7-5.6s18.4-4,15.1-9.7-18,3.9-18,3.9,4.4-7.2-.1-10.4-9.6,14.5-9.6,14.5L413,308.6c-19.7-3.4-28.7-22.3-28.7-22.3L377,297.8s10.2,11.8,30.6,17.8c14.8,4.3,14.8,4.3,28.5,4.8,4.2,4,16.9,19.3,24.5,13.2,4.9-3.9-11.9-10.7-11.9-10.7S467.6,327.5,466.8,319.7ZM189,308.6c-19.8-2.9-14.4-19.3-14.4-19.3s17.1-6.5,13.6-10.8-9.7,1.4-9.7,1.4,9.8-15.5,3.8-18.2-9.8,15.8-9.8,15.8,2.1-18-5.7-18.1-1.8,18.4-1.8,18.4-8.1-16.2-11.6-11c-5.4,8.1,8.8,18.7,13.1,22.5,0.4,12.4,6.6,26.7,27.9,26.4S225,297.8,225,297.8l-7.2-11.5S208.9,311.1,189,308.6Z"/>
  <path class="wings cls-4" d="M462.2 240.1c.8-44.6-70.4-53.1-72.3-50.6s14.4 26.3-2.9 53.2c-11 11.3 1.5 17.2 1.5 17.2s5.4-10 13.1-15.4 20.5 6.6 20.5 6.6 2.8-7.2.6-21.1c8.3-.9 18.6 13.8 18.6 13.8a47.2 47.2 0 0 0-2.6-22.4c2.7-.6 22 8.9 23.5 18.7zm-251.1-50.5c-1.9-2.6-73.1 6-72.3 50.6 1.5-9.9 20.8-19.4 23.4-18.7a47.2 47.2 0 0 0-2.6 22.4s10.3-14.7 18.6-13.8c-2.2 13.9.6 21.1.6 21.1s12.8-12.1 20.5-6.6 13.1 15.4 13.1 15.4 12.6-6 1.5-17.2c-17.2-27-.9-50.6-2.8-53.2z"
  id="wings_01" />
  <path class="cls-6" d="M246 267c-6.2-6.2-11.1-5.1-16.4-.7 3.6-14 7.8-40.2-.6-28.3-10.6 15.3-26.3 51.1-19 47l5.9-3.2A135.2 135.2 0 0 0 204 304c-3.7 8.3-2.3 24.7 2 32 2.9 5 4.3-11.1 10.1-21.6-1.5 5.7-2.4 11.2-3.1 15.6-1.4 9 4.1 24.4 10.2 30.4s-3-31.6 13.5-34.7c14.2-2.6 17.5-27.7 11-38.5 2.5-7.9 2.3-16.2-1.7-20.2zm150 37a135.2 135.2 0 0 0-11.9-22.2l5.9 3.2c7.3 4.1-8.4-31.7-19-47-8.3-11.9-4.1 14.4-.6 28.3-5.3-4.4-10.2-5.5-16.4.7-4 4-4.2 12.3-1.7 20.3-6.5 10.8-3.2 35.8 11 38.5 16.4 3 7.4 40.6 13.5 34.7S388.4 339 387 330c-.7-4.4-1.6-9.9-3.1-15.6 5.7 10.5 7.1 26.5 10.1 21.6 4.3-7.3 5.7-23.7 2-32zm-74-131l12-5s4.5-5-22-2-49.5 25-59 36 76-9 76-9 4.5-3.5 13-3c0-6.5-12-8-12-8l12-1c-5-5.5-20-8-20-8z"
  id="fur_02" />
  <path class="cls-6" d="M300 179.7c-58.5 0-99 93.5-80 150s140.5 52 160-2-21.5-148-80-148z" id="body_BASIC" />
  <g id="mouth_18">
    <path class="cls-7 cls-4" d="M364.9 291.1c-3.3-19.3-21-42.1-65.9-42.1s-61.9 22.7-65.9 42.1c-4.1 17.3 10 72.9 65.9 72.9s70-55.6 65.9-72.9z" id="mouth-2" data-name="mouth" />
    <path class="cls-8" d="M347.4 290.8c-2.4-10.7-15.2-23.3-47.7-23.3s-44.8 12.6-47.7 23.3 7.2 40.3 47.7 40.3 50.6-30.7 47.7-40.3z" id="mouth-3" data-name="mouth" />
    <path class="cls-9" d="M299.7 331.1a63.2 63.2 0 0 0 19.5-2.8c-2.6-6.5-11.1-11.3-21.2-11.3s-17.7 4.3-20.7 10.3a61.1 61.1 0 0 0 22.4 3.8z" id="tongue" />
    <path class="cls-10" d="M277.7 315.4h-.7a5.7 5.7 0 0 0-6.7 4.5l-.7 3.6a47.2 47.2 0 0 0 11.3 5.1l1.3-6.4a5.7 5.7 0 0 0-4.5-6.8zm18.8-47.9a96.1 96.1 0 0 0-12.1 1l.9 4.7a5.7 5.7 0 0 0 6.7 4.5h.7a5.7 5.7 0 0 0 4.5-6.7zm4.3 3.3a5.7 5.7 0 0 0 4.5 6.7h.7a5.7 5.7 0 0 0 6.7-4.5l1-4.9a100.9 100.9 0 0 0-12.2-.9zm25.9 48.9a5.7 5.7 0 0 0-6.7-4.5h-.7a5.7 5.7 0 0 0-4.5 6.7l1.4 7a48.9 48.9 0 0 0 11.4-4.5z"
    id="teeth" />
  </g>
  <path class="cls-4" d="M300 240c-7.7 0-14 .4-14 5.1s6.3 11.9 14 11.9 14-7.2 14-11.9-6.3-5.1-14-5.1z" id="nose_09" />
  <path class="cls-8" d="M309.3 246.6a1.9 1.9 0 0 0-2.5.1 9.7 9.7 0 0 1-13.4 0 1.9 1.9 0 0 0-2.5-.1 1.6 1.6 0 0 0-.1 2.4 13 13 0 0 0 7.5 3.6v1.6a1.8 1.8 0 0 0 3.6 0v-1.6a13 13 0 0 0 7.5-3.6 1.6 1.6 0 0 0-.1-2.4z" id="nose_01" />
  <path class="cls-11" d="M241.7 182.8c-14.6-10.8-48.4-4.1-54.4 9.7-1.3 2.9 9.4-1.9 23.4-2.2s20.8 22 37 25.4 23.8-18.3 23.4-21.7-17.5-2.4-29.4-11.2zm170 9.7c-6-13.8-39.8-20.5-54.4-9.7-11.9 8.8-29.1 7.8-29.5 11.2s7.2 25 23.4 21.7 23.1-25.8 37-25.4 24.8 5.1 23.5 2.2z"
  id="horns_01" />
  <g class="antt">
    <path class="cls-12" d="M214 126.1a1.6 1.6 0 0 0-1.8 1.4v.6a1.6 1.6 0 0 0 1.7 1.5 64 64 0 0 1 62.5 62.5 1.6 1.6 0 0 0 1.5 1.7h.6a1.6 1.6 0 0 0 1.4-1.8 67.5 67.5 0 0 0-65.9-65.9zm174 1.4a1.6 1.6 0 0 0-1.8-1.4 67.8 67.8 0 0 0-66.2 66.1 1.6 1.6 0 0 0 1.4 1.8h.6a1.6 1.6 0 0 0 1.5-1.7 64.3 64.3 0 0 1 62.8-62.8 1.6 1.6 0 0 0 1.7-1.5v-.6z"
    id="antennae" />
    <path class="cls-11" d="M219.9 122.4l-12-.8a5.5 5.5 0 0 0-5.9 5.1v1a5.5 5.5 0 0 0 5.1 5.9l12 .8a5.5 5.5 0 0 0 5.9-5.1v-1a5.5 5.5 0 0 0-5.1-5.9zm175.1 5.3v-1a5.5 5.5 0 0 0-5.9-5.1l-12 .8a5.5 5.5 0 0 0-5.1 5.9v1a5.5 5.5 0 0 0 5.9 5.1l12-.8a5.5 5.5 0 0 0 5.1-5.9z"
    id="antennae-2" data-name="antennae" />
  </g>
  <path class="cls-11" d="M370.5 207.3a150.5 150.5 0 0 1 24.1 12.8c-8.6-23.2-44.3-41.5-44.3-41.5s8.6.2 29.6-.6c-9.1-10-56-14.3-56-14.3s7.6-4.6 10.6-8.5c-15-.2-39.6 8-39.6 8l8.9-18.2s-16.6 8.9-17.7 18.9c-.2 1.5-2.2-.2-4.3-2.6-5.6-6.3-18.2-12.6-18.2-12.6a179.4 179.4 0 0 1 7.5 16.5 112 112 0 0 0-34 .4c20.7 7.4 22.3 9.3 22.3 9.3s-25.1-3.4-46.4 14.2c5.1.1 22.4 1.4 22.4 1.4s-27.9 24.4-29.5 43.8c4.2-6.3 8.1-7.8 10.7-7.8-4.1 9.8-6.2 19.9-6.5 44.3a175.3 175.3 0 0 0 6 45.8s3.6-28.8 7.9-46.1 12.5-26.2 12.5-26.2 14.5 25.7 33.6 25.4c-4.5-5.8-4.4-28.2-4.4-28.2s3.4 8.2 21 10.5c-3-10.8.6-20.1 5.1-26.8l6 2.3c18 7.7 19.6 20.8 19.6 20.8s11.8-11.2-1.1-28.2c8.1 5.4 17.3 13.5 18.3 23.4 3.9-4.8 3-13.3 3-13.3s11.9 13.3 17.5 28.2c7.7-3.7 6.8-13.4 6.8-18.4 24 33 20 84.1 20 84.1s14.1-32.3 9.1-66-20.5-50.8-20.5-50.8z"
  id="hair_05" />
  <g id="eyes_18">
    <path class="cls-6" d="M338 158.8a11.7 11.7 0 1 0-19 9.2 13.9 13.9 0 0 1-.6 8.3 14.9 14.9 0 0 1-3.5 5.6 59.7 59.7 0 0 1 6.1 2.1 15.2 15.2 0 0 1 .9-6.3 13.5 13.5 0 0 1 5-6.8l-.5-.2a11.7 11.7 0 0 0 11.6-11.9zm-52 0a11.7 11.7 0 1 0-11.7 11.8h.1l-.4.2a13.5 13.5 0 0 1 5 6.8 15.4 15.4 0 0 1 1 5.9 59 59 0 0 1 5.9-1.9 15.1 15.1 0 0 1-3.3-5.4 13.7 13.7 0 0 1-.5-8.5h-.2a11.8 11.8 0 0 0 4.1-8.9z"
    id="eye_tabs_smaller" data-name="eye tabs smaller" />
    <path class="cls-13" d="M299.6 103a24.3 24.3 0 0 0-6.9 47.5 29.5 29.5 0 0 1 3.9 15.2c0 6.8-1.9 12.9-4.9 16.8h17.7c-3-3.9-4.9-10-4.9-16.8s1.7-12.1 4.4-16a24.3 24.3 0 0 0-9.3-46.7zm-40.4 76.6a25.9 25.9 0 0 1-4.3-10.9 20.5 20.5 0 1 0-9.9 6.4 25.8 25.8 0 0 1 8.7 8.2c3.2 4.8 4.7 10 4.5 14.1l12.5-8.4c-4-1.2-8.2-4.6-11.4-9.4zm102-45.6a20.5 20.5 0 0 0-16 33.2 24.2 24.2 0 0 1-4.5 13.4c-3.2 4.8-7.5 8.1-11.4 9.4l12.5 8.4c-.3-4.2 1.2-9.3 4.5-14.1s7.5-8.1 11.4-9.4l-.5-.3a20.5 20.5 0 1 0 4-40.6z"
    id="eye_tabs" data-name="eye tabs" />

    <g class="eyes" data-name="eyes">
      <ellipse class="eye" cx="326.8" cy="159.1" rx="8.5" ry="8.6" />
      <ellipse class="eye" cx="274.8" cy="159.1" rx="8.5" ry="8.6" />
      <circle class="eye" cx="299.5" cy="126.5" r="17.5" />
      <circle class="eye" cx="362" cy="155" r="15" />
      <circle class="eye" cx="240" cy="156" r="15" />
    </g>
    <g class="pupils">
      <ellipse class="pupil" cx="330.5" cy="160.5" rx="3.1" ry="3.7" />
      <ellipse class="pupil" cx="278.5" cy="160.5" rx="3.1" ry="3.7" />
      <ellipse class="pupil" cx="307.1" cy="129.4" rx="6.4" ry="7.6" />
      <ellipse class="pupil" cx="368.5" cy="157.5" rx="5.5" ry="6.5" />
      <ellipse class="pupil" cx="246.5" cy="158.5" rx="5.5" ry="6.5" />
    </g>
  </g>
</svg>

<div class="code">
  <p class="comment">//Simple Tween</p>
  <div class="addFunction">
    <p>function flap() {</p>
    <p>var tl = new TimelineLite();</p>
    <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tl.to(".wings", 0.1, {scaleY:0.8, rotation:-5, repeat:7, yoyo:true, transformOrigin: "50% 50%", ease:Bounce.easeInOut}, "master2+=10");</p>
    <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return tl;<br>
    }</p>
  </div><!--addFunction-->
  <p class="function1">function blinky() {</p>
  <p class="tll">var tl = new TimelineLite();</p>
  <p class="tmx">TweenMax.to(".eye", 0.1, {scaleY:0, repeat:3, yoyo:true, transformOrigin: "50% 50%", ease:Power4.easeInOut});</p>
  <p class="tmx2">TweenMax.to(".antenna", 0.1, {scaleY:0, rotation:5, repeat:3, yoyo:true, transformOrigin: "50% 50%", ease:Power4.easeInOut});</p>
  <p class="function2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return tl;<br>
  }</p>
  <p class="master">var master = new TimelineLite();<br>
  master.add(blinky());</p>
  <p class="addMaster">
  master.add(flap());</p>
</div>
<h2 class="bye">Bye!</h2>
            
          
!
            
              body {
  background: #0b132b;
  font-family: 'Fira Mono', monospace;
}

.monsta {
  margin-top: -60px;
  width: 40%;
  margin-left: 3%;
  float: left;
}

.code, .bye, .monsta {
  visibility: hidden;
}

.tll, .function1, .function2, .master, .addFunction, .addMaster, .bye {
  display: none;
}

.addMaster {
  margin-top: 0;
}

.master {
  margin-bottom: 0;
}

.bye {
  margin-top: 70px;
  float: left;
  width: 40%;
}

.spacer {
  margin-left: 56px;
}

.code {
  float: left;
  width: 50%;
  margin-top: 30px;
}

.eye {
  fill: white;
}

.tmxPrev {
  width: 78px;
  float:left;
}

.comment, .comment1, .comment2, .comment3 {
  color: #666;
}

.eyelids {
  fill: #8AD6D0;
}

.pupils {
  fill: black;
}

#arms-second, #arms-third {
  display: none;
}

h2 {
  font-size: 90px;
  letter-spacing: 0.1em;
}

p, h2 {
  color: #6FFEE8;
}

.cls-1 {
  isolation: isolate;
}

.cls-2,
.cls-8 {
  fill: #0b132b;
}

.cls-3 {
  opacity: 0.2;
}

.cls-4 {
  fill: #3a506b;
}

.cls-10,
.cls-11,
.cls-12,
.cls-13,
.cls-4,
.cls-5,
.cls-6,
.cls-8,
.cls-9 {
  fill-rule: evenodd;
}

.cls-5 {
  fill: #4b8199;
}

.cls-6 {
  fill: #5bbfbd;
}

.cls-7 {
  opacity: 0.3;
}

.cls-9 {
  fill: #bc5b80;
}

.cls-10 {
  fill: #fff;
}

.cls-11 {
  fill: #6ffee8;
}

.cls-12 {
  fill: #399994;
}

.cls-13 {
  fill: #8ad6d0;
}

@media screen and (max-width:1000px) {
  .monsta {
    margin-top: 0 !important;
    width: 45% !important; 
    margin-left: 0 !important;
  }
  
  .code, .bye {
    width: 48% !important;
  }
}

@media screen and (max-width:545px) {
  .monsta {
    margin-top: -30px !important;
    width: 100% !important; 
  }
  
  .code, .bye {
    width: 85% !important;
    margin-top: -100px !important;
    margin-left: 9% !important;
  }
  
  .code {
    font-size: 0.9em;
  }
  
  .bye {
   text-align: center;
  }
}
            
          
!
            
              MorphSVGPlugin.convertToPath("circle, rect, ellipse, line, polygon, polyline");

  var $monstaP = $(".monsta path"),
      $tmx = $(".tmx"),
      $tmx2 = $(".tmx2"),
      $antt = $(".antt"),
      $eye = $(".eye"),
      $pupil = $(".pupil"),
      $arms = $("#arms"),
      $code = $(".code"),
      $comment = $(".comment");

TweenMax.set($monstaP, {
  stroke: "#3a506b"
});

TweenMax.set(".code, .bye, .monsta", {
  visibility: "visible"
});

// draw the character + first TweenMax
function sceneOne() {
  var tl = new TimelineLite(),
      codeST = new SplitText($tmx, {type:"words, chars"});
  
  tl.fromTo($monstaP, 4, {drawSVG:"50% 50%"}, {drawSVG:true, ease:Power2.easeOut});
  tl.from($monstaP, 3, {fill:"none", ease:Power2.easeOut}, "-=1");
  tl.to($monstaP, 2, {stroke:"none", ease:Power2.easeOut}, "-=2");
  tl.add("blink-=1");
  tl.from($comment, 0.7, {opacity:0, scale:0, transformOrigin:"0% 50%", ease:Power4.easeOut}, "blink");
  tl.staggerFrom(codeST.chars, 0.1, {opacity:0, scale:0.8, ease:Power4.easeOut}, 0.03, "blink+=1");
  tl.staggerTo(codeST.chars, 0.1, {color:"#509EA4", ease:Power4.easeOut}, 0.03, "blink+=1.1");
  tl.to($eye, 0.23, {scaleY:0, repeat:3, yoyo:true, transformOrigin: "50% 50%", ease:Power4.easeInOut}, "blink+=4.3");
  tl.to($pupil, 0.23, {scaleY:0, repeat:3, yoyo:true, transformOrigin: "50% 50%", ease:Power4.easeInOut}, "blink+=4.3");
  tl.to($comment, 0.8, {opacity:0, scale:0.8, transformOrigin:"50% 50%", ease:Power4.easeOut}, "blink+=4.5");
  
return tl;
}

// two TweenMax 
function sceneTwo() {
  var tl = new TimelineLite(),
      codeST = new SplitText($tmx2, {type:"words, chars"});
  
  tl.add("anten", "+=1");
  tl.call(function() {
    $(".comment").replaceWith('<p class="comment1">//Two Tweens</p>');
  });
  tl.to(".comment1", 2, {opacity:1, transformOrigin:"0% 50%", ease:Power4.easeOut}, "anten+=0.1");
  tl.staggerFrom(codeST.chars, 0.1, {opacity:0, scale:0, ease:Power4.easeOut}, 0.03, "anten+=1");
  tl.staggerTo(codeST.chars, 0.1, {color:"#509EA4", ease:Power4.easeOut}, 0.03, "anten+=1.1");
  tl.to($eye, 0.23, {scaleY:0, repeat:3, yoyo:true, transformOrigin: "50% 50%", ease:Power4.easeInOut}, "anten+=4.3");
  tl.to($pupil, 0.23, {scaleY:0, repeat:3, yoyo:true, transformOrigin: "50% 50%", ease:Power4.easeInOut}, "anten+=4.3");
  tl.to($antt, 0.15, {scaleY:1.1, rotation:5, repeat:4, yoyo:true, transformOrigin: "50% 50%", ease:Bounce.easeInOut}, "anten+=4.3");
  
return tl;
}

// timeline 
function sceneThree() {
  var tl = new TimelineLite(),
      tll = $(".tll"),
      newTL = new SplitText(".tll", {type:"words, chars"});
  
  tl.add("timeline1");
  tl.call(function() {
    $(".comment1").replaceWith('<p class="comment2">//A Simple Timeline</p>');
    
    $(".tmx div").filter(":first").replaceWith('<span class="spacer"></span>tl.to(".eye",');
    $(".tmx").css("color", "#509EA4");
    
    $(".tmx2 div").filter(":first").replaceWith('<span class="spacer"></span>tl.to(".antenna",');
    $(".tmx2").css("color", "#509EA4");
    
    TweenMax.set(tll, {
      display: "block",
      opacity: 1
    });
    
    TweenMax.set(newTL.chars, {
      opacity: 0,
      scale: 0
    });
  });
  tl.to(".comment2", 2, {opacity:1, transformOrigin:"0% 50%", ease:Power4.easeOut}, "timeline1+=0.1");
  tl.to(tll, 2, {scaleY:1, transformOrigin:"50% 50%", ease:Circ.easeOut}, "timeline1+=0.1");
  tl.staggerTo(newTL.chars, 0.1, {opacity:1, scale:1, transformOrigin:"50% 50%", ease:Power4.easeOut}, 0.03, "timeline1+=1");
  tl.staggerTo(newTL.chars, 0.1, {color:"#509EA4", ease:Power4.easeOut}, 0.03, "timeline1+=1.1");
  tl.to($eye, 0.23, {scaleY:0, repeat:3, yoyo:true, transformOrigin: "50% 50%", ease:Power4.easeInOut}, "timeline1+=2.5");
  tl.to($pupil, 0.23, {scaleY:0, repeat:3, yoyo:true, transformOrigin: "50% 50%", ease:Power4.easeInOut}, "timeline1+=2.5");
  tl.to($antt, 0.15, {scaleY:1, rotation:0, repeat:4, yoyo:true, transformOrigin: "50% 50%", ease:Bounce.easeInOut}, "timeline1+=3.5");
  
return tl;
}

// master1 
function sceneFour() {
  var tl = new TimelineLite(),
      func1 = new SplitText(".function1", {type:"words, chars"}),
      func2 = new SplitText(".function2", {type:"words, chars"}),
      master1 = new SplitText(".master", {type:"words, chars"});
  
  tl.add("master1", "+=1");
  tl.call(function() {
    $(".comment2").replaceWith('<p class="comment3">//A Master Timeline</p>');
    
    TweenMax.set(".function1, .function2, .master", {
      display: "block"
    });
    
    TweenMax.set([func1.chars, func2.chars, master1.chars], {
      opacity: 0,
      scale: 0
    });
  });
  tl.to(".comment3", 2, {opacity:1, transformOrigin:"0% 50%", ease:Power4.easeOut}, "timeline1+=0.1");
  tl.to($code, 2, {scale:0.7, transformOrigin:"0% 0%", ease:Circ.easeOut}, "timeline1+=0.1");
  tl.to(".function1", 2, {scaleY:1, transformOrigin:"50% 50%", ease:Circ.easeOut}, "timeline1+=0.1");
  
  tl.staggerTo(func1.chars, 0.1, {opacity:1, scale:1, transformOrigin:"50% 50%", ease:Power4.easeOut}, 0.03, "timeline1+=1");
  tl.staggerTo(func1.chars, 0.1, {color:"#509EA4", ease:Power4.easeOut}, 0.03, "timeline1+=1.1");
  
  tl.staggerTo(func2.chars, 0.1, {opacity:1, scale:1, transformOrigin:"50% 50%", ease:Power4.easeOut}, 0.03, "timeline1+=2");
  tl.staggerTo(func2.chars, 0.1, {color:"#509EA4", ease:Power4.easeOut}, 0.03, "timeline1+=2.1");
  
  tl.staggerTo(master1.chars, 0.1, {opacity:1, scale:1, transformOrigin:"50% 50%", ease:Power4.easeOut}, 0.03, "timeline1+=3");
  tl.staggerTo(master1.chars, 0.1, {color:"#509EA4", ease:Power4.easeOut}, 0.03, "timeline1+=3.1");
  
  tl.to($eye, 0.23, {scaleY:0, repeat:3, yoyo:true, transformOrigin: "50% 50%", ease:Power4.easeInOut}, "timeline1+=6");
  tl.to($pupil, 0.23, {scaleY:0, repeat:3, yoyo:true, transformOrigin: "50% 50%", ease:Power4.easeInOut}, "timeline1+=6");
  tl.to($antt, 0.15, {scaleY:0.9, rotation:4, repeat:4, yoyo:true, transformOrigin: "50% 50%", ease:Bounce.easeInOut}, "timeline1+=7");
  
return tl;
}

// master2 
function sceneFive() {
  var tl = new TimelineLite(),
      addM = new SplitText(".addMaster", {type:"words, chars"}),
      master2 = new SplitText(".addFunction p", {type:"words, chars"});
  
  tl.add("master2", "+=1");
  tl.call(function() { 
    TweenMax.set(".addFunction, .addMaster", {
      display: "block"
    });
    
    TweenMax.set([master2.chars, addM.chars], {
      opacity: 0,
      scale: 0
    });
  });
  tl.staggerTo(master2.chars, 0.1, {opacity:1, scale:1, transformOrigin:"50% 50%", ease:Power4.easeOut}, 0.03, "master2");
  tl.staggerTo(master2.chars, 0.1, {color:"#509EA4", ease:Power4.easeOut}, 0.03, "master2+=0.1");
  
  tl.staggerTo(addM.chars, 0.1, {opacity:1, scale:1, transformOrigin:"50% 50%", ease:Power4.easeOut}, 0.03, "master2+=6.5");
  tl.staggerTo(addM.chars, 0.1, {color:"#509EA4", ease:Power4.easeOut}, 0.03, "master2+=6.6");
  
  tl.to($eye, 0.23, {scaleY:0, repeat:3, yoyo:true, transformOrigin: "50% 50%", ease:Power4.easeInOut}, "master2+=8");
  tl.to($pupil, 0.23, {scaleY:0, repeat:3, yoyo:true, transformOrigin: "50% 50%", ease:Power4.easeInOut}, "master2+=8");
  tl.to($antt, 0.15, {scaleY:1.1, rotation:0, repeat:4, yoyo:true, transformOrigin: "50% 50%", ease:Bounce.easeInOut}, "master2+=9");
  tl.to(".wings", 0.1, {scaleY:0.8, rotation:-5, repeat:7, yoyo:true, transformOrigin: "50% 50%", ease:Bounce.easeInOut}, "master2+=10");
  
return tl;
}

// waves
function waves() {
  var tl = new TimelineLite(),
      bye = new SplitText(".bye", {type:"words, chars"}),
      arms2 = $("#arms-second"),
      arms3 = $("#arms-third");
  
  tl.add("arms");
  tl.call(function() { 
    TweenMax.set(".bye", {
      display:"block"
    });
    
    TweenMax.set(bye.chars, {
      opacity: 0,
      scaleX: 0,
      css:{
        transformPerspective:400, 
        perspective:400, 
        transformStyle:"preserve-3d"
      }
    });
  });
  tl.to($code, 1.8, {opacity: 0, ease:Circ.easeIn}, "arms");
  tl.to($code, 0.1, {display:"none"}, "arms+=1.9");
  tl.staggerTo(bye.chars, 3, {opacity:1, css:{rotationX:720, scaleX:1, z:50, color:"#BC5B80"}, ease:Bounce.easeOut}, "arms+=2");
  tl.to($arms, 0.1, {morphSVG:arms2, ease:Linear.easeNone}, "arms+=5");
  tl.to($arms, 0.1, {morphSVG:arms3, ease:Linear.easeNone}, "arms+=5.1");
  tl.to($arms, 0.1, {morphSVG:arms2, ease:Linear.easeNone}, "arms+=5.2");
  tl.to($arms, 0.1, {morphSVG:$arms, ease:Linear.easeNone}, "arms+=5.3");
  
  tl.to($arms, 0.1, {morphSVG:arms2, ease:Linear.easeNone}, "arms+=5.4");
  tl.to($arms, 0.1, {morphSVG:arms3, ease:Linear.easeNone}, "arms+=5.5");
  tl.to($arms, 0.1, {morphSVG:arms2, ease:Linear.easeNone}, "arms+=5.6");
  tl.to($arms, 0.1, {morphSVG:$arms, ease:Linear.easeNone}, "arms+=5.7");
  
return tl;
}


var master = new TimelineLite();
master.add(sceneOne(), "scene1")
      .add(sceneTwo(), "scene2+=2")
      .add(sceneThree(), "scene3+=2")
      .add(sceneFour(), "scene4+=1")
      .add(sceneFive(), "scene5+=1.5")
      .add(waves(), "wavey");

//master.seek("wavey");
            
          
!
999px
Loading ..................

Console