Pen Settings

HTML

CSS

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.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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.

+ add another resource

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                #outer.animate
  #kumahead
    %svg{:id => "bear", :viewbox => "0 0 28.12 31.72", :xmlns => "http://www.w3.org/2000/svg", "xmlns:xlink" => "http://www.w3.org/1999/xlink"}
      %defs
        :css
          .cls-1{fill:#fff;}.cls-1,.cls-3{fill-rule:evenodd;}.cls-2{mask:url(#mask);}.cls-3{fill:#290b53;}
        %mask#mask{:height => "31.72", :maskunits => "userSpaceOnUse", :width => "28.12", :x => "0", :y => "0"}
          %g#mask-2
            %polygon#path-1.cls-1{:points => "0 0 28.13 0 28.13 31.72 0 31.72 0 0"}
      %title Asset 1
      %g#Layer_2{"data-name" => "Layer 2"}
        %g#Layer_1-2{"data-name" => "Layer 1"}
          %g#Page-1
            %g#Homepage
              %g#Group-19
                %g#Group-14
                  %g#Group-12
                    %g#Group-3
                      %g.cls-2
                        %path#head.cls-3{:d => "M25.8,8.29a.29.29,0,0,1,0-.24c1-1.22,1.85-2.62,1.85-3.7A4,4,0,0,0,23.34,0a4.25,4.25,0,0,0-3.26,1.25.26.26,0,0,1-.26.07A19.51,19.51,0,0,0,16.48.57a.24.24,0,0,0-.26.3c.24.92,1.84,6.71,3.07,11.18a4.22,4.22,0,0,1-4.08,5.34H13.57a4.22,4.22,0,0,1-4.09-5.22C10.58,7.68,12,1.78,12.28.81A.25.25,0,0,0,12,.51a19.28,19.28,0,0,0-4,.92.23.23,0,0,1-.27-.07A4.19,4.19,0,0,0,4.35,0,4,4,0,0,0,0,4.35c0,1.25,1.2,3,2.33,4.3a.22.22,0,0,1,0,.23L.45,14.51v0c0,.2-.8,3.51,4.89,8.8C7,24.92,13,30.62,14,31.65a.24.24,0,0,0,.33,0l8.94-8.31C29.44,17.61,28,14.52,28,14.52Z"}
                      %path#nose.cls-3{:d => "M15.54,13.7H13.23a.7.7,0,0,1-.7-.7l-.28-2.88a.69.69,0,0,1,.69-.69h2.89a.69.69,0,0,1,.69.69L16.24,13a.7.7,0,0,1-.7.7"}
                  %g#mouth
                    %path#upperteeth.cls-2{:d => "M16.28,12.34c-.25-.45,0-1.33-1-1.4-1.6-.19-3.7-.39-3.69,1.15-.05.87-1.25-1.18-.68-1.56a10.12,10.12,0,0,1,5.27-.07C17.68,10.19,16.93,12,16.28,12.34Z"}
                    %g#lowermouth
                      %path#lowerteeth.cls-2{:d => "M11.46,16.52c.36.36.42,1.09,1.33,1.11,2.11.15,2.81.24,3.52-1.12.26,1.94-.15,1.68-2.68,1.85C12.09,18.21,11.09,18.44,11.46,16.52Z"}
                      %path#shadow.cls-2{:d => "M15.73,18.58a5.34,5.34,0,0,1-3.72,0C13.15,18.61,14.47,18.58,15.73,18.58Z"}
                      %path#tongue.cls-2{:d => "M13.89,16.11c0-.38.67-1.1,1.89-.64.65.5.1,1.43-1.9,1.32-2.05.1-2.32-.73-2-1.24C13,14.91,13.91,15.72,13.89,16.11Z"}
  #wrap
    %svg.kuma{:viewbox => "0 0 819.38 316.75", :xmlns => "http://www.w3.org/2000/svg"}
      %g#Layer_2{"data-name" => "Layer 2"}
        -3.times do
          %g#Layer_1-2{"data-name" => "Layer 1"}
            %path.cls1-1{:d => "M476.3,64.35,430,121l47.34,63.47H454.51l-39.62-54H404.25v54H385V64.35h19.21v49.57h10.3L454,64.35Z"}
            %path.cls1-1{:d => "M565.5,91.79v92.63H547.66V173.27c-11.66,9.44-15.61,11.32-23.15,11.32H509.93c-8.07,0-12.53-1.88-16-5.32-3.6-3.6-5.49-8.06-5.49-20.92V91.79h17.84v65.36c0,4.46.69,7.2,2.4,8.92,1.89,1.88,3.61,2.57,9.61,2.57h12c5.66,0,10.29-1.54,17.32-5.14V91.79Z"}
            %path.cls1-1{:d => "M609.41,91.79v11.15c11.67-9.6,15.45-11.32,23.16-11.32h11.15c8.07,0,12.53,1.89,16,5.32a17.43,17.43,0,0,1,4.11,7c12.87-10.46,16.64-12.35,24.53-12.35h11.15c8.06,0,12.52,1.89,16,5.32,3.6,3.6,5.48,8.06,5.48,20.93v66.55H703.08V119.07c0-4.46-.69-7.21-2.41-8.92-1.88-1.89-3.6-2.58-9.6-2.58h-8.58c-5.66,0-10.63,1.72-17.5,5.15a46,46,0,0,1,.18,5.15v66.55H647.33V119.07c0-4.46-.69-7.21-2.41-8.92-1.88-1.89-3.6-2.58-9.6-2.58h-8.58c-5.66,0-10.46,1.72-17.33,5.15v71.7H591.58V91.79Z"}
            %path.cls1-1{:d => "M752,96.94c3.6-3.6,7.37-5.15,15.61-5.15h28.47c10.46,0,14.93,1.89,18,5,4.29,4.28,5.32,8.75,5.32,25.21v62.44H801.71V173.1c-11.15,9.26-14.41,11.49-22.64,11.49H764.66c-8.41,0-12.86-1-16.64-4.8-3.26-3.26-5.49-8.58-5.49-20.24,0-11,2.06-18.18,5.66-21.79,4.12-4.11,8.24-6.69,30.71-6.69,9.09,0,17.32.86,22.81,2.58V123.36c0-10.81-.68-13.56-2.06-14.93-1.2-1.2-3.08-1.54-8.06-1.54H773.06c-4.28,0-6.17.34-7.37,1.54-1.37,1.37-1.72,4.46-2.06,11.49H746.31C746.48,105.86,748.36,100.54,752,96.94Zm49.74,66.73V144.45h-24c-11.67,0-13.9.86-15.44,2.41-1.72,1.71-2.23,3.77-2.23,9.77,0,6.87.34,10,1.71,11.32,1.2,1.2,3.09,1.38,7.21,1.38h13.21C789,169.33,793.13,168.3,801.71,163.67Z"}
          
#overlay
%svg{:id => "squg", :style => "display:none", :version => "1.1", :xmlns => "http://www.w3.org/2000/svg"}
  %defs
    %filter#squiggly-0
      %feturbulence#turbulence{:basefrequency => "0.02 0.00", :numoctaves => "3", :result => "noise", :seed => "0"}
      %fedisplacementmap#displacement{:in => "SourceGraphic", :in2 => "noise", :scale => "2"}
    %filter#squiggly-1
      %feturbulence#turbulence{:basefrequency => "0.06 0.00", :numoctaves => "3", :result => "noise", :seed => "1"}
      %fedisplacementmap{:in => "SourceGraphic", :in2 => "noise", :scale => "6"}
    %filter#squiggly-2
      %feturbulence#turbulence{:basefrequency => "0.04 0.00", :numoctaves => "3", :result => "noise", :seed => "2"}
      %fedisplacementmap{:in => "SourceGraphic", :in2 => "noise", :scale => "2"}
    %filter#squiggly-3
      %feturbulence#turbulence{:basefrequency => "0.02 0.00", :numoctaves => "3", :result => "noise", :seed => "3"}
      %fedisplacementmap{:in => "SourceGraphic", :in2 => "noise", :scale => "5"}
    %filter#squiggly-4
      %feturbulence#turbulence{:basefrequency => "0.04 0.00", :numoctaves => "3", :result => "noise", :seed => "4"}
      %fedisplacementmap{:in => "SourceGraphic", :in2 => "noise", :scale => "1"}



#cncf
  .square
    -4.times do
      .panel
  %h1{"data-splitting" => "chars"} Cloud Native<b>Computing Foundation</b>
              
            
!

CSS

              
                


@font-face {font-family: "Avenir"; src: url("https://assets.codepen.io/383755/AvenirNextLTPro-Bold.woff"); }


$elastic: cubic-bezier(0.175, 0.185, 0.32, 1.275);
$ease: cubic-bezier(1,0.25,0.25,1.05);

body{
  display:grid;
  height:100vh;
  place-items:center;
  perspective:900px;
  background:#fff;
  overflow:hidden;
  transform:scale(0.8);
  #squig{
    position:absolute;
    width:0%;
    height:0%;
  }
  #overlay{
    position:absolute;
    width:300px;
    height:300px;
    top:calc(50% - 150px);
    left:calc(50% - 150px);
  }
  #outer.animate ~ #overlay{  
    animation: zoom 0.45s $ease 1 forwards 0.75s; 
    box-shadow:0 0 0 0px #1155cb, 0 0 0 100vw #290b53;
    z-index:12;
    border-radius:100%;
    &:before{
      content:'';
      position:absolute;
      width:100%;
      height:100%;
      background:#290b53;
      box-shadow: 0 0 0 0px #1155cb;
      z-index:-1;
      border-radius:100%;
      animation: zoom2 0.75s ease-in-out 1 forwards 0.1s;
      @keyframes zoom2{
        to{
          transform:scale(0);
          box-shadow: 0 0 0 150px #1155cb;
        }
      }
    }
    @keyframes zoom{
      from{
        transform:scale(1);
        background:transparent;
        box-shadow:0 0 0 0px #1155cb, 0 0 0 100vw #290b53;
      }
      to{
        transform:scale(10);
        background:transparent;
        box-shadow:0 0 0 100vw #290b53;
      }
    }
  }
  #outer{
    position:absolute;
    width:100vw;
    height:100vh;
    left:0;
    top:0;
    &:before{
      content:'click to restart';
      position:absolute;
      bottom:-220px;
      left:-725px;
      width:100%;
      text-align:center;
      opacity:0;
    }
  }
  #outer.animate{
    animation:scroll 0.65s ease-in-out 1 forwards 0.95s, squiggly-anim 0.1s 14 2.05s, scrollUp 0.75s $ease 1 forwards 3.75s;
    transform:translateX(0px); 
    z-index:10;
    @keyframes squiggly-anim {
          0% {
            -webkit-filter: url('#squiggly-0');
                    filter: url('#squiggly-0');
          }
          25% {
            -webkit-filter: url('#squiggly-1');
                    filter: url('#squiggly-1');
          }
          50% {
            -webkit-filter: url('#squiggly-2');
          }
          75% {
            -webkit-filter: url('#squiggly-3');
                    filter: url('#squiggly-3');
          }
          100% {
            -webkit-filter: url('#squiggly-4');
                    filter: url('#squiggly-4');
          }
        }
      @keyframes scroll{
        to{
          transform:translateX(725px);
        }
      }
      @keyframes scrollUp{
        to{
          transform:scale(0.8) translateX(700px) translateY(-200px);
        }
      }
    &:before{
      animation:fadeIn 0.5s ease-in-out 1 forwards;
      @keyframes fadeIn{
        to{
          opacity:1;
        }
      }
      animation-delay:8s;
    }
    #wrap{
      width:950px;
      position:absolute;
      height:300px;
      top:calc(50% - 150px);
      margin-top:70px;
      left:calc(50% -  1320px);
      svg{
        position:absolute;
        left:0;
        top:-160px;
        g{
          g{
            &:nth-of-type(2), &:nth-of-type(1){
              path{
                fill:#1155cb;
                animation:jitter 0.06s linear 16 alternate;
                transform:translateY(130px);
                opacity:0;
                @for $i from 1 through 4{
                  &:nth-of-type(#{$i}){
                    animation-delay:#{(5 - $i)/12 + 1.95}s;
                  }
                }
                @keyframes jitter{
                  0%{
                    opacity:0.25;
                    transform:translateY(134px) translateX(-4px);
                  }
                  100%{
                    opacity:0.25;
                    transform:translateY(126px) translateX(2px);
                  }
                }
              }
            }
            &:nth-of-type(1){
              path{
                @for $i from 1 through 4{
                  fill:darken(#1155cb, 10%)
                  &:nth-of-type(#{$i}){
                    animation-delay:#{(5 - $i)/12 + 1.8}s;
                  }
                }
              }
            }
            path{
              fill:#290b53;
              transform:translateY(300px);
              animation:jump 0.3s $elastic 1
                forwards;
              @keyframes jump{
                to{
                  transform:translateY(130px);
                }
              }
              @for $i from 1 through 4{
                &:nth-of-type(#{$i}){
                  animation-delay:#{$i/10 + 1.25}s;
                }
              }
            }
          }
        }
      }
    }
  }
  #kumahead{
    animation:drop 1.5s ease-in-out 1 forwards;
    transform-origin:50% 400px;
    position:absolute;
    top:calc(50%  - 300px);
    left:calc(50% - 200px);
    transform:scale(0.5) scaleY(6) translate(0px, -2000px);
    @keyframes drop{
      60%{
        transform:scale(0.5) scaleY(0.8) translate(0px, 0px);
      }
      68%{
        transform:scale(0.5) translate(0px, 0px) rotate(-1deg);
      }
      72%{
        transform:scale(0.5) translate(0px, 0px) rotate(1deg);
      }
      80%{
        transform:scale(0.5) translate(0px, 0px) rotate(-8deg);
      }
      100%{
        transform:scale(0.5) translate(-2000px, 0px);
      }
    }
  }
  svg#bear{
    width:400px;
    animation:growl 1.25s ease-in-out 2 alternate forwards 1.5s;
    transform-origin:bottom;
    transform-style:preserve-3d;
    #mouth{
      transform:translateX(0.5px) translateY(0.5px);
      opacity:0;
      animation:fadeIn 0s linear 1 forwards 1s;
      path{
        fill:#fff;
      }
      
      #upperteeth{
        transform:translateY(4px);
        animation:mouth2 1.25s ease-in-out 2 alternate forwards 1.5s;
        @keyframes mouth2{
          0%, 25%{
            transform:translateY(4px);
          }
          45%, 100%{
            transform:translateY(0px);
          }
        }
      }
      #lowermouth{
        transform:translateY(-2px);
        animation:mouth1 1.25s ease-in-out 2 alternate forwards 1.5s;
        @keyframes mouth1{
          0%, 25%{
            transform:translateY(-2px);
          }
          45%, 100%{
            transform:translateY(0px);
          }
        }
      }
    }
    @keyframes growl{
      0%, 20%{
        transform:scaleY(1);
      }
      30%{
        transform:scaleY(1.1);
      }
      45%, 100%{
        transform:rotateX(40deg) scaleY(1.25);
      }
    }
    #head{
     animation:morph 1.25s ease-in-out 2 alternate forwards 1.5s;
      @keyframes morph{
        0%, 25%{
          d:path("M25.8,8.29a.29.29,0,0,1,0-.24c1-1.22,1.85-2.62,1.85-3.7A4,4,0,0,0,23.34,0a4.25,4.25,0,0,0-3.26,1.25.26.26,0,0,1-.26.07A19.51,19.51,0,0,0,16.48.57a.24.24,0,0,0-.26.3c.24.92,1.84,6.71,3.07,11.18a4.22,4.22,0,0,1-4.08,5.34H13.57a4.22,4.22,0,0,1-4.09-5.22C10.58,7.68,12,1.78,12.28.81A.25.25,0,0,0,12,.51a19.28,19.28,0,0,0-4,.92.23.23,0,0,1-.27-.07A4.19,4.19,0,0,0,4.35,0,4,4,0,0,0,0,4.35c0,1.25,1.2,3,2.33,4.3a.22.22,0,0,1,0,.23L.45,14.51v0c0,.2-.8,3.51,4.89,8.8C7,24.92,13,30.62,14,31.65a.24.24,0,0,0,.33,0l8.94-8.31C29.44,17.61,28,14.52,28,14.52Z");
        }
        45%, 100%{
           d:path("M25.8,8.29a.29.29,0,0,1,0-.24c1-1.22,1.85-2.62,1.85-3.7A4,4,0,0,0,23.34,0a4.25,4.25,0,0,0-3.26,1.25.26.26,0,0,1-.26.07A19.51,19.51,0,0,0,16.48.57a.24.24,0,0,0-.26.3c.24.92,1.82.88,3.05,5.35a4.21,4.21,0,0,1-4.08,5.34H13.55A4.23,4.23,0,0,1,9.46,6.33C10.56,1.85,12,1.78,12.28.81A.25.25,0,0,0,12,.51a19.28,19.28,0,0,0-4,.92.23.23,0,0,1-.27-.07A4.19,4.19,0,0,0,4.35,0,4,4,0,0,0,0,4.35c0,1.25,1.2,3,2.33,4.3a.22.22,0,0,1,0,.23L.45,14.51v0c0,.2-.8,3.51,4.89,8.8C7,24.92,13,30.62,14,31.65a.24.24,0,0,0,.33,0l8.94-8.31C29.44,17.61,28,14.52,28,14.52Z")
        }
      }
    }
    
    #nose{
      animation:morph2 1.25s ease-in-out 2 alternate forwards 1.5s;
      @keyframes morph2{
        0%, 25%{
          d:path("M15.54,13.7H13.23a.7.7,0,0,1-.7-.7l-.28-2.88a.69.69,0,0,1,.69-.69h2.89a.69.69,0,0,1,.69.69L16.24,13a.7.7,0,0,1-.7.7");
        }
        45%, 100%{
          d:path('M15.54,5H13.23a.69.69,0,0,1-.7-.69l-.28-1.44a.69.69,0,0,1,.69-.7h2.89a.69.69,0,0,1,.69.7l-.28,1.44a.69.69,0,0,1-.7.69');
        }
      }
    }
  }
}



 #outer.animate ~  #cncf{
    position:absolute;
    width:300px;
    height:300px;
    left:50%;
    top:calc(50% + 120px);
    transform:translate(-50%, -50%) scale(0.75);
   animation:scrollLeft 0.5s $ease 1 forwards 5.75s;
  &:before{
    content:'';
    position:absolute;
    width:400vw;
    height:600%;
    top:0%;
    left:-100vw;
    background:#efefef;
    animation:swipeUp 1s $ease 1 forwards 6s;
    transform:translateY(100vh);
    @keyframes swipeUp{
      to{
        transform:translateY(-6.5%);
      }
    }
  }
   @keyframes scrollLeft{
     to{
       transform:translate(calc(-50% - 320px), -50%) scale(0.5);
     }
   }
     h1{
      font-family: "Avenir";
      position:absolute;
      text-transform:uppercase;
      font-size:160px;
      width:1250px;
      display:inline-block;
      top:50%;
      left:calc(100% + 30px);
      transform:translateY(calc(-50% + 20px));
      margin:0;
      line-height:1;
       b{
         margin-left:10px;
         span.word{
           span.char{
             &:before, &:after{
               transform:translateY(-150px);
               animation:jumpUp 0.25s $elastic 1 forwards;
             animation-delay:calc(7.5s - (var(--char-index) * 0.03s));
             }
             &:before{
               animation-delay:calc(7.6s - ((var(--char-index)) * 0.03s));
               color:#446ca8;
             }
           }
         }
       }
       span.word{
         line-height:1;
         span.char{
           display:inline-block;
           position:relative;
           overflow:hidden;
           line-height:1;
           margin:-10px 0px;
           color:transparent;
           &:before, &:after{
             content:attr(data-char);
             color:#222;
             position:absolute;
             top:0;
             left:0;
             transform:translateY(175px) rotate(-5deg);
             animation:jumpUp 0.3s $elastic 1 forwards;
             animation-delay:calc((var(--char-index) * 0.05s) + 6.5s);
             @keyframes jumpUp{
               to{
                 transform:translateY(0);
               }
             }
           }
           &:before{
             color:#76C5D6;
             animation-delay:calc((var(--char-index) * 0.05s) + 6.6s);
           }
         }
       }
      b{
         display:block;
         font-size:88px;
       }
    }
    .square{
      position:absolute;
      width:33.333%;
      height:33.333%;
      top:50%;
      left:50%;
      transform:translate(-50%, -50%) scale(1);
      background:transparent;
      perspective:300px;
      opacity:1;
      animation:scaleMore 0.5s $ease 1 forwards 5.75s;
      @keyframes scaleMore{
        to{
          transform:translate(-50%, -50%) scale(0.9);
        }
      }
      &:after{
          content:'';
          position:absolute;
          width:calc(100% + 2px);
          height:calc(100% + 2px);
          left:-1px;
          top:-1px;
          box-shadow:0 0 0 2px #fff;
          background:#fff;
          transform-style:preserve-3d;
          backface-visibility:hidden;
          z-index:10;
          transform:scale(1);
          animation:scaleDown 1s cubic-bezier(0.175, 0.185, 0.32, 1.275) 1 forwards 5s;
        
          @keyframes scaleDown{
            25%{
              transform:scale(2.15);
            }
            50%{
              transform:scale(2.15);
            }
            100%{
              transform:scale(1) rotate(180deg);
            }
          }
        }
      &:before{
        content:'';
        position:absolute;
        width:215%;
        height:215%;
        left:50%;
        top:50%;
        transform:translate(-50%, -50%) scale(0);
        background:linear-gradient(45deg, transparent 28%, #76C5D6 28%, #76C5D6 37%, transparent 37%), linear-gradient(225deg, transparent 28%, #76C5D6 28%, #76C5D6 37%, transparent 37%), #fff;
        z-index:9;
        animation:clipIn 0.5s cubic-bezier(0.175, 0.185, 0.32, 1.275) 1 forwards 5.5s;
        @keyframes clipIn{
          50%{
            transform:translate(-50%, -50%) scale(1);
          }
          100%{
            transform:translate(-50%, -50%) scaleX(1);
          }
        }
      }
      .panel{
        position:absolute;
        width:100%;
        height:100%;
        top:0;
        left:0;
        transform-style:preserve-3d;
        background:#76C5D6;
        transform:rotateX(0deg) rotateY(0deg);
        &:before{
          content:'';
          position:absolute;
          width:100%;
          height:100%;
          left:0;
          top:0;
          background:#446CA8;
          transform-style:preserve-3d;
          backface-visibility:hidden;
        }
        &:nth-of-type(1), &:nth-of-type(4):before{
          transform-origin:bottom;
          animation:flip1 0.5s cubic-bezier(0.175, 0.185, 0.32, 1.275) 1 forwards;
          @keyframes flip1{
            to{
              transform:rotateX(180deg);
            }
          }
        }
        &:nth-of-type(2), &:nth-of-type(3):before{
          transform-origin:top;
          animation:flip2 0.5s cubic-bezier(0.175, 0.185, 0.32, 1.275) 1 forwards;
          @keyframes flip2{
            to{
              transform:rotateX(-180deg);
            }
          }
        }
        &:nth-of-type(3), &:nth-of-type(1):before{
          transform-origin:right;
          animation:flip3 0.5s cubic-bezier(0.175, 0.185, 0.32, 1.275) 1 forwards;
          @keyframes flip3{
            to{
              transform:rotateY(180deg);
            }
          }
        }
        &:nth-of-type(4), &:nth-of-type(2):before{
          transform-origin:left;
          animation:flip4 0.5s cubic-bezier(0.175, 0.185, 0.32, 1.275) 1 forwards;
          @keyframes flip4{
            to{
              transform:rotateY(-180deg);
            }
          }
        }
        @for $i from 1 through 4{
          &:nth-of-type(#{$i}){
            animation-delay:#{($i/12) + 4}s;
            &:before{
              animation-delay:#{((4 - $i)/12) + 4.65}s;
            }
          }
        }
      }
    }
  }
              
            
!

JS

              
                Splitting();

var outer = $("#outer, #overlay, #cncf").clone().removeClass();
$("body").on("click", function () {
  $("#outer").remove();
  $("#cncf").remove();
  $("body").prepend(outer);
  $("#outer").addClass("animate");
});
              
            
!
999px

Console