Course Clear! (Splitting.js Demo)

course-clear-splitting-js-demo.markdown

Course Clear! (Splitting.js Demo)

A Super Mario Maker-like Course Clear screen built with Splitting.js.

A Pen by Shaw on CodePen.

License.

index.html

<div data-splitting="cells" data-columns="20"></div>
<h1 class="course-clear" data-splitting="chars">Course Clear</h1>
<div class="click">Click to Replay</div>

script.js

Splitting();

/* ---------------------------------- */

var s = document.createElement('style');
s.innerHTML = " *, *:before, *:after { animation: none !important; }";

document.addEventListener('click',function(){
  document.head.appendChild(s);
  requestAnimationFrame(function(){
    document.head.removeChild(s);
  });
});

scripts

<script src="https://unpkg.com/splitting/dist/splitting.min.js"></script>
<script src="https://codepen.io/shshaw/pen/5eb6d4e9bfd78e3911ed9d0d0dfce69b"></script>

style.scss

/* Clear out these styles to start fresh or use this as a base! */


@import url('https://fonts.googleapis.com/css?family=Quantico:700');

// html { height: 100%; display: flex; }
// body { margin: auto; }
html, body {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  background: #000736;
  color: #FFF;
  font: normal 600 10vw/1.5 Kanit, sans-serif;
}

body { 
  display: grid;
  grid-template: 1/1;
  align-items: center;
}



.click,
.course-clear {
  grid-area: 1/1;
  font-family: 'Quantico', sans-serif;
  text-align: center;
  position: relative;
  color: #101A30;
  text-transform: uppercase;
}


.click {
  font-size: 12px;
  animation: 
    text-fade 1s linear 6s backwards;
}

.course-clear {

  font-size: 10vw;
  @media (min-width: 800px) {
    font-size: 80px;
  }

  .char {
    animation: 
      text-bounce 1s cubic-bezier(.6,.1,.3,1) .4s backwards,
      text-fade .2s linear .4s backwards, 
      text-slide-out .6s cubic-bezier(.4,0,.8,.7) 3s forwards;
    transform-origin: bottom center;
    animation-delay: 
      calc( .4s + var(--char-index) * .05s), 
      calc( .4s + var(--char-index) * .05s), 
      calc( 3s + var(--char-index) * .025s);
  }

  @keyframes text-fade {
    from { opacity: 0; }
  }

  @keyframes text-bounce {
    25%, 65%, 100% { 
      transform: translateY(0%) scaleY(1); 
      animation-timing-function: cubic-bezier(.66,0,.29,.99); 
    }
    0% { transform: translateY(-50%) scaleY(1.1); }
    45% { transform: translateY(-15%) scaleY(1.05); }
    90% { transform: translateY(-3%) scaleY(1); }
  }

  @keyframes text-slide-out {
    to {
      opacity: 0;
      transform: translateX(-30vw);
    }
  }
}

.splitting.cells { grid-area: 1/1; }

.splitting.cells,
.splitting .cell-grid {
  width: 100vw;
  height: 100vh;

  .cell {
    background: #FFD543;
    visibility: visible; 
    margin: 0 -1px;
    animation: slide-in 2s linear 2 alternate both;
    animation-delay: calc(40ms * var(--col-index));
  }

  @keyframes slide-in {
    0% { 
      animation-timing-function: cubic-bezier(.64,.1,.31,1.18); }
    30% { 
      transform: scaleY(0.3); 
      animation-timing-function: cubic-bezier(.3,.1,0,1.6);
    }
    60%, 100% {
      transform: scaleY(0.4);
    }
  }

}

styles

<link href="https://unpkg.com/splitting/dist/splitting.css" rel="stylesheet" />
<link href="https://unpkg.com/splitting/dist/splitting-cells.css" rel="stylesheet" />