Celebrating 1,000!

celebrating-1-000.markdown

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.

index.html

<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>

script.js

console.clear();

Splitting();

scripts

<script src="https://lucid-northcutt-877344.netlify.com/dist/splitting.js"></script>

style.scss

$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); }
}