Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Celebrating 1,000!

Celebrating 1,000!

1,000 Twitter Followers 1,000 YouTube Subscribers

Thank you all for your support! 🎉

✍️ Reply with your favorite tips/eps! We'd love to hear what you've learned from the streams ✉️ Sign up at http://keyframe.rs for news about more exciting content coming soon !

Bouncing animation adapted from a now deleted pen. If you know the source, please comment below!

A Pen by @keyframers on CodePen.

License.

<div class="one-k" data-splitting>1,000</div>
<div class="dance-container">
<div class="avatar-container -shaw">
<div class="avatar">
<svg class="kf_face -shaw" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 340 356">
<path fill="#bf3c26" d="M323.5 177.8L172 19.6 20.4 177.8 172 336l151.5-158.2z"/>
<clipPath id="a">
<path d="M323.5 177.8L172 19.6 20.4 177.8 172 336l151.5-158.2z"/>
</clipPath>
<g clip-path="url(#a)">
<circle cx="173" cy="135.9" r="100" fill="#f7bb9a"/>
<path fill="#bf3c26" d="M.1-29h343.7v152.7H.1z"/>
<circle cx="203.4" cy="176.9" r="14"/>
<circle cx="140.5" cy="176.9" r="14"/>
<path fill="#fff" fill-opacity=".1" d="M293 177.8L173 52.6V303l120-125.2z"/>
</g>
<path fill="none" stroke="#000" stroke-width="21.6" d="M323.5 177.8L172 19.6 20.4 177.8 172 336l151.5-158.2z"/>
</svg>
</div>
</div>
<div class="avatar-container -david">
<div class="avatar">
<svg class="kf_face -david" viewBox="230 0 340 356">
<path fill="#e1b39a" d="M555.6 177.8L404 19.6 252.5 177.8 404 336l151.6-158.2z"/>
<clipPath id="b">
<path d="M555.6 177.8L404 19.6 252.5 177.8 404 336l151.6-158.2z"/>
</clipPath>
<g clip-path="url(#b)">
<circle cx="404" cy="134.9" r="100" fill="#f7bb9a"/>
<path fill="#3e3430" d="M230.5-29h343.7v152.7H230.5z"/>
<ellipse cx="433.8" cy="176.9" rx="14" ry="14"/>
<ellipse cx="370.9" cy="176.9" rx="14" ry="14"/>
<path fill="#fff" fill-opacity=".1" d="M524 177.8L404 52.6V303l120-125.2z"/>
</g>
<path fill="none" stroke="#000" stroke-width="21.6" d="M555.6 177.8L404 19.6 252.5 177.8 404 336l151.6-158.2z"/>
</svg>
</div>
</div>
<div class="shadow"></div>
</div>
<a href="https://keyframe.rs" target="_blank" data-keyframers-credit style="color: #FFF"> Learn more about @keyframers </a>
<script src="https://codepen.io/shshaw/pen/QmZYMG.js?q"></script>
console.clear();
Splitting();
<script src="https://lucid-northcutt-877344.netlify.com/dist/splitting.js"></script>
$jump-duration: 0.7s;
$jump-easing: cubic-bezier(0.895, 0.03, 0.685, 0.22);
$ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
html, body { background: #2B2E31; color: #FFF; }
html { height: 100%; display: flex; }
body { margin: auto; }
/* ---------------------------------- */
@import url('https://fonts.googleapis.com/css?family=Orbitron:700');
.one-k {
font-family: 'Orbitron', monospace;
font-weight: 700;
font-size: 20vw;
@media (min-width: 600px) { font-size: 120px; }
perspective: 200px;
perspective-origin: top center;
color: #FFD950;
.word {
transform: rotateX(15deg);
display: inline-block;
transform-style: preserve-3d;
}
.char {
display: inline-block;
transform-style: preserve-3d;
position: relative;
&:before,
&:after {
content: attr(data-char);
position: absolute;
top: 0;
left: 0;
opacity: 0.4;
transform-style: preserve-3d;
transform: translate3d(0, 3px, -10px);
}
&:after {
transform: translate3d(0, 3px, -20px);
opacity: 0.2;
}
&[data-char=","] { vertical-align: .1em; }
// animation: flip-around 4s cubic-bezier(.5,0,.5,1) infinite;
// @keyframes flip-around {
// to { transform: rotateY(1turn); }
// }
animation: celebration-dance $jump-duration linear infinite alternate;
animation-delay: calc( -.2s * var(--char-index) );
transform-origin: center bottom;
}
}
/* ---------------------------------- */
.dance-container {
height: 60%;
max-height: 15vw;
@media (min-width: 600px) {
max-height: 90px;
}
position: absolute;
bottom: 34%;
left: 0;
right: 0;
display: flex;
width: 100%;
justify-content: center;
align-items: center;
animation: fade-in 0.4s linear 0s both;
@keyframes fade-in {
from { opacity: 0; }
}
}
.avatar-container {
display: inline-block;
height: 100%;
animation: celebration-dance $jump-duration linear infinite alternate;
transform-origin: center bottom;
// margin-right: -5%;
// outline: solid 1px red;
&.-david {
animation-delay: $jump-duration/-2;
}
}
.avatar {
height: 100%;
width: auto;
animation: do-a-flip $jump-duration * 20 linear -$jump-duration infinite;
transform-origin: 60% center;
.-david & {
transform-origin: 40% center;
}
}
.avatar svg {
height: 100%;
transform: translateX(10%);
.-david & {
transform: translateX(-10%);
}
}
@keyframes celebration-dance {
0% {
transform: translate3d(0, -30%, 0) scaleY(1);
animation-timing-function: $jump-easing;
}
50% {
transform: translate3d(0, 0, 0) scaleY(1.2) scaleX(0.9);
}
70% {
transform: translate3d(0, 0, 0) scaleY(0.9) scaleX(1);
}
100% {
transform: translate3d(0, 0, 0) scaleY(0.8) scaleX(1.1);
}
}
@keyframes do-a-flip {
0% { transform: rotate(0deg); }
21% { transform: rotate(0deg); animation-timing-function: $ease-out-cubic; }
28% { transform: rotate(-360deg); }
71% { transform: rotate(-360deg); animation-timing-function: $ease-out-cubic; }
78% { transform: rotate(360deg); }
100% { transform: rotate(360deg); }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.