Emoji animation

- for welliba

by Ercan Cicek

HTML

<h3>Animation: 0.33s cubic-bezier(0.18, 0.89, 0.32, 1.28)</h3>
<h3>color emoji according their state (see figma)</h3>
<div id="emoji-wrapper">
  <button id="best" onClick="setActiveEmoji('best');">
    <svg width="60" height="63" viewBox="0 0 60 63" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M1.23033 58.4712C2.70839 60.058 14.7475 62.8472 31.971 62.9992C47.0175 63.0532 58.9416 60.2836 58.9995 58.4712C59.0962 55.1868 43.5925 54.6347 29.1889 55.1868C14.2961 55.7586 -1.07232 55.9998 1.23033 58.4712Z" fill="#EBEBEB" />
      <path d="M30 1C35.7357 1 41.3425 2.70082 46.1115 5.88738C50.8806 9.07394 54.5976 13.6031 56.7925 18.9022C58.9874 24.2012 59.5617 30.0322 58.4428 35.6576C57.3238 41.2831 54.5618 46.4504 50.5061 50.5061C46.4504 54.5618 41.2831 57.3238 35.6576 58.4428C30.0322 59.5617 24.2012 58.9874 18.9022 56.7925C13.6031 54.5976 9.07394 50.8806 5.88738 46.1115C2.70082 41.3425 1 35.7357 1 30C1 22.3087 4.05535 14.9325 9.4939 9.4939C14.9325 4.05535 22.3087 1 30 1Z" fill="#F9FDFD" stroke="#B5B5B5" stroke-width="2" />
      <path d="M30 4C35.1423 4 40.1691 5.52487 44.4448 8.38179C48.7205 11.2387 52.053 15.2993 54.0209 20.0502C55.9887 24.8011 56.5036 30.0288 55.5004 35.0723C54.4972 40.1158 52.0209 44.7486 48.3848 48.3848C44.7486 52.0209 40.1158 54.4972 35.0723 55.5004C30.0288 56.5036 24.8011 55.9887 20.0502 54.0209C15.2993 52.053 11.2387 48.7205 8.38179 44.4448C5.52487 40.1691 4 35.1423 4 30C4 23.1044 6.73928 16.4912 11.6152 11.6152C16.4912 6.73928 23.1044 4 30 4V4Z" fill="#F8F8F8" />
      <path d="M44 32C42.2681 36.618 36.656 40 30.0015 40C23.347 40 17.7339 36.617 16 32" stroke="#151C4F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
      <path d="M21.1445 21.0199C21.5096 21.0558 21.8638 21.1621 22.1867 21.3329C22.5097 21.5038 22.795 21.7356 23.0262 22.0152C23.2575 22.2948 23.4301 22.6165 23.5341 22.9618C23.638 23.3071 23.6714 23.6692 23.6321 24.0273C23.455 25.5168 22.055 24.8976 20.5057 24.7266C18.9564 24.5557 17.843 24.9005...

SCSS

#emoji-wrapper {
  margin: 50px 0 0 50px;
  display: grid;
  grid-template-columns: 60px;
  grid-template-rows: repeat(5, 63px);
  grid-column-gap: 0px;
  grid-row-gap: 16px;

  >button {
    outline: none;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    > svg {
      transition: transform 0.33s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    }
    &.active {
      > svg {
        transform: scale(1.33);
        > path:nth-child(3) {
          fill: #00C89D;
        }
      }
    }
    &.inactive {
      > svg {
        transform: scale(0.8);
        > path:nth-child(3) {
          fill: rgb(248, 248, 248);
        }
      }
    }
  }
}

JavaScript

var emojiNamesArr = ["best", "good", "neutral", "bad", "worst"];

function setActiveEmoji(emojiName) {
	document.getElementById(emojiName).classList.remove("inactive");
	document.getElementById(emojiName).classList.add("active");
  for(var i = 0; i < emojiNamesArr.length; i++) {
  	if(emojiNamesArr[i] !== emojiName) {
    		document.getElementById(emojiNamesArr[i]).classList.add("inactive");
    }
  }
}