rocket jiggle

Created by Cris Dobbins from the Noun project

by Augustus Yuan

HTML

<h2>Rocket showcase</h2>
<section class="showcase">
  <div class="rocket-container idle">
    <svg class="rocket" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M1.5 6.5V7C1.5 7.55228 1.05228 8 0.5 8H0V7.5C0 6.94772 0.447715 6.5 1 6.5H1.5Z" fill="black" />
      <path fill-rule="evenodd" clip-rule="evenodd" d="M3.38909 1.61091C4.35478 0.645219 5.64261 0.0757208 7 0.00703239C7.09243 0.0023551 7.18518 0 7.27817 0H8V0.721826C8 0.81482 7.99764 0.907571 7.99297 1C7.92428 2.35739 7.35478 3.64522 6.38909 4.61091L5 6V7.5L4.5 8L0 3.5L0.5 3H2L3.38909 1.61091ZM6.11235 3.40531C6.62866 2.7103 6.93524 1.87838 6.99082 1.00918C6.12163 1.06476 5.28971 1.37134 4.59469 1.88765L6.11235 3.40531ZM5.43931 4.14648L4.29622 5.28957L3.74488 5.83067L2.16421 4.25L3.85352 2.56069L5.43931 4.14648Z" fill="black" />
    </svg>
  </div>


  <div class="rocket-container green">
    <svg class="rocket" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M1.5 6.5V7C1.5 7.55228 1.05228 8 0.5 8H0V7.5C0 6.94772 0.447715 6.5 1 6.5H1.5Z" fill="black" />
      <path fill-rule="evenodd" clip-rule="evenodd" d="M3.38909 1.61091C4.35478 0.645219 5.64261 0.0757208 7 0.00703239C7.09243 0.0023551 7.18518 0 7.27817 0H8V0.721826C8 0.81482 7.99764 0.907571 7.99297 1C7.92428 2.35739 7.35478 3.64522 6.38909 4.61091L5 6V7.5L4.5 8L0 3.5L0.5 3H2L3.38909 1.61091ZM6.11235 3.40531C6.62866 2.7103 6.93524 1.87838 6.99082 1.00918C6.12163 1.06476 5.28971 1.37134 4.59469 1.88765L6.11235 3.40531ZM5.43931 4.14648L4.29622 5.28957L3.74488 5.83067L2.16421 4.25L3.85352 2.56069L5.43931 4.14648Z" fill="black" />
    </svg>
  </div>

  <div class="rocket-container pink">
    <svg class="rocket" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M1.5 6.5V7C1.5 7.55228 1.05228 8 0.5 8H0V7.5C0 6.94772 0.447715 6.5 1 6.5H1.5Z" fill="black" />
      <path fill-rule="evenodd" clip-rule="evenodd" d="M3.38909 1.61091C4.35478 0.645219 5.64261 0.0757208 7...

CSS

body {
  font-family: Helvetica;
}


.showcase {
  width: 100%;
  display: flex;
  margin: 25px 0px
}

.idle {
  background: rgba(0, 0, 0, 0.1)
}

.green {
    background: #69FFC3;
}

.pink {
  background: rgba(250, 180, 255, 0.9)
}

.yellow {
  background: rgba(254, 238, 133, 0.9)
}

.rocket-container {
  width: 40px;
  height: 30px;
  margin: 0px 10px;
  transition: all 0.2s ease-in;
  border: 0.5px solid transparent;
  border-radius: 4px;
}

.rocket-container svg {
  margin: 7px 12px;
  transform-origin: 50% 50%;
  transform: translate3d(0, 0, 0) rotate(0deg);
  backface-visibility: hidden;
}

.jiggle {
  animation: jiggle 1s cubic-bezier(.36,.07,.19,.97) both;
  animation-iteration-count: 2;
}

@keyframes jiggle {
	0% { -webkit-transform: rotate(0deg); }
	10% { -webkit-transform: rotate(-10deg); }
	20% { -webkit-transform: rotate(10deg); }
	30% { -webkit-transform: rotate(0deg); }
	40% { -webkit-transform: rotate(10deg); }
	50% { -webkit-transform: rotate(-10deg); }
	60% { -webkit-transform: rotate(0deg); }
	70% { -webkit-transform: rotate(-10deg); }
	80% { -webkit-transform: rotate(10deg); }
	90% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(0deg); }
}

JavaScript

const btn = document.querySelector(".js-boost-btn")
btn.addEventListener("click", (e) => {
  const idleRocketEl = document.querySelector(".js-rocket")
  const jigRocketEl = document.querySelector(".js-rocket-jiggle")
  idleRocketEl.classList.add("green");
  jigRocketEl.classList.add("jiggle");
  setTimeout(() => {
   idleRocketEl.classList.remove("green");
   jigRocketEl.classList.remove("jiggle");
  }, 500)
})