Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save git2358/26b0ce3d42b768d75add24049de59333 to your computer and use it in GitHub Desktop.
Save git2358/26b0ce3d42b768d75add24049de59333 to your computer and use it in GitHub Desktop.
Course Clear! (Splitting.js Demo)
<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>
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);
});
});
<script src="https://unpkg.com/splitting/dist/splitting.min.js"></script>
<script src="https://codepen.io/shshaw/pen/5eb6d4e9bfd78e3911ed9d0d0dfce69b"></script>
/* 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);
}
}
}
<link href="https://unpkg.com/splitting/dist/splitting.css" rel="stylesheet" />
<link href="https://unpkg.com/splitting/dist/splitting-cells.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment