Like Button Microinteraction

index.html

<div class="wrapper">
  <div class="button-container">
    <div class="button">
      <span class="content">
        <i class="icon fa fa-heart" aria-hidden="true"></i>
        <i class="icon far fa-heart" aria-hidden="true"></i>
        <span class="text like">Like<span class="text d">d</span></span>
        
        <span class="text number">29</span>
      </span>
    </div>
  </div>
</div>

script.js

var like = parseInt($(".number").text()) + 1;
var flag = true;
var timeline1 = gsap.timeline({ repeatDelay: 0.7, paused: true});
timeline1.to(".button", {duration: 0.7, width: 50, ease: Back.easeIn}) 
  .to(".like", {duration: 0.2, opacity: 0}, "-=0.7")
.to(".number", {duration: 0.2,opacity: 0, fontSize: 0}, "-=0.7")
.to(".far", {duration: 0.4, display: "none"}, "-=0.5") 
.to(".fa", {duration: 0.1, display: "inline-block"},"-=0.1")
.to(".button", {duration: 0.7, width: 170})
.to(".like", { opacity: 1},"-=0.5")
.to(".d", {duration: 0.3, opacity: 1, translateX: 0},"-=0.2").to(".number", {duration: 0.2, opacity: 1, text: like, fontSize: 25}, "-=0.1");

$(".button").click(function(){
  event.stopPropagation();
  flag ? timeline1.play() :   timeline1.progress(0).pause();
  flag = !flag;    

  
}); 

/*
Original design by Kashish Mehta 
Dribbble - https://dribbble.com/kashish4xd
Design - https://dribbble.com/shots/11353059-Like-Button
*/

style.css

/* VARIABLES -  START */
/* COLORS  */
$theme-bg: #3B4252;
$button-bg: #D8DEE9;
$theme-pink: #BF616A;
$theme-grey: #434C5E;
$theme-black: #3B4252;
/* DIMENSIONS */
$bg-height: 225px;
$bg-width: 325px;
$bg-radius: 10px;
$button-radius: 5px;
$button-height: 50px;
$button-width: 170px;
/* FONTS */
@import url("https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap");
$theme-font: "Lato", sans-serif;
/* VARIABLES - END */
/* COMMONS - START */
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
* {
  box-sizing: border-box;
  margin: 0;
}
/* COMMONS - END */
/* STYLES -  START */
.wrapper {
  @extend .flex-center;
  background-color: #E5E9F0;
  font-family: $theme-font;
  font-weight: 400;
  .button-container {
    @extend .flex-center;
    height: $bg-height;
    width: $bg-width;
    background-color: $theme-bg;
    border-radius: $bg-radius;
  }
}
.button {
  height: $button-height;
  width: $button-width;
  background-color: $button-bg;
  border-radius: $button-radius;
  padding: 12.5px;
  cursor: pointer;
}
.content {
  .icon {
    font-size: 25px;
    color: $theme-pink;
    &.fa {
      display: none;
    }
  }
  .text {
    font-size: 25px;
    color: $theme-black;
    &.like {
      margin-left: 10px;
    }
    &.d {
     opacity: 0;
      display: inline-block;
transform: translateX(12px);
    }
    &.number {
      margin-left: 10px;
      color: $theme-grey;

    }
  }
}
/* STYLES - END */