Heart Animation

Heart Animation

Heart Animation

index.html

<div class="container">
  <a href="#" class="fav" id="fav">
    <svg class="stableHeart" viewBox="-1 0 18 15">
     <defs>
      <path d="M16 4.872c0-4.9-6.894-5.8-8 .695C6.81-.928 0-.027 0 5.25c0 5.274 8 9.697 8 9.697s8-5.177 8-10.075z" id="heartPath">
     </defs>
     
     <use xlink:href="#heartPath" />
    </svg>
    <svg class="floatHeart" viewBox="-1 0 18 15">
      <use xlink:href="#heartPath" />
    </svg>
  </a>
</div>

script.js

var favd = false;
var favElem = document.getElementById('fav');

favElem.addEventListener('mousedown', function(e) {
  favElem.className = 'fav favPress';
});

favElem.addEventListener('mouseup', function(e) {
  favd = !favd;

  var className = 'fav';
  if(favd) {
    className += ' favd';
  }
  favElem.className = className;
});

document.addEventListener("touchstart", function(){}, true);

style.css

body {
  background: #2c3e50;
  height: 100vh;
  margin: 0;
}

.container {  
  display: flex;
  align-items: center;
  justify-content: center;
  
  height: 100%;
}

.fav {
  position: relative;
  
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

.fav svg {
  transform-origin: center center;
  transition: all .15s ease-out;
  
  width: 100px;
  height: 120px;
}

.fav #heartPath {
  fill: inherit;
  stroke: inherit;
  stroke-width: inherit;
  transform: inherit;
}

.fav.favPress svg {
  transform: scale(0.8);
}

.floatHeart {
  position: absolute;
  top: 0;
  left: 0;
}

.stableHeart {
  stroke: #bdc3c7;
  fill: none;
}

.favd .stableHeart {
  stroke: #ff827a;
  fill: #ff827a;
  opacity: 1;
}

.fav:not(.favd):hover .stableHeart {
  stroke: #ff827a;
  opacity: 0.75;
}

.fav.favPress .stableHeart {
  opacity: 1;
}

.floatHeart {
  fill: none;
  
  opacity: 0;
}

.fav:hover .floatHeart {
  stroke: #ff827a;
  fill: #ff827a;
}

.fav.favd .floatHeart {
  animation-duration: 800ms;
  animation-name: poof;
}

@keyframes poof {
  from {
    top: 0;
    opacity: 0.6;
  }
  
  to {
    top: -150%;
    opacity: 0;
  }
}