rotating favorite star from mastodon

by Mladen Mihajlovic

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
<button  type="button" class="star-icon icon-button " tabindex="0" style="font-size: 18px; width: 23.1429px; height: 23.1429px; line-height: 18px;">
  <i role="img" class="fas fa-star fa-fw" aria-hidden="true"></i>
</button>

SCSS

.icon-button {
  display: inline-block;
  padding: 0;
  color: #606984;
  border: 0;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  transition: all .1s ease-in;
  transition-property: background-color, color;
  text-decoration: none;

  &.star-icon {
    &.activate {
      &>.fa-star {
        animation: spring-rotate-in 1s linear;
      }
    }

    &.deactivate {
      &>.fa-star {
        animation: spring-rotate-out 1s linear;
      }
    }

    &.active {
      color: #ca8f04;
    }
  }
}



@keyframes spring-rotate-in {
  0% {
    transform: rotate(0deg);
  }

  30% {
    transform: rotate(-484.8deg);
  }

  60% {
    transform: rotate(-316.7deg);
  }

  90% {
    transform: rotate(-375deg);
  }

  100% {
    transform: rotate(-360deg);
  }
}

@keyframes spring-rotate-out {
  0% {
    transform: rotate(-360deg);
  }

  30% {
    transform: rotate(124.8deg);
  }

  60% {
    transform: rotate(-43.27deg);
  }

  90% {
    transform: rotate(15deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

JavaScript

const btn = document.querySelector('button');

btn.addEventListener('click', () => {
  if (btn.classList.replace('activate', 'deactivate')) {
    btn.classList.remove('active')
  } else if (btn.classList.replace('deactivate', 'activate')) {
    btn.classList.add('active')
  } else {
    btn.classList.add('activate')
    btn.classList.add('active')
  }
})