Like Animation — Jumpy Hearts

index.haml

- @verbs = ['Like', 'Love', 'Heart']

.middle-wrapper
  .like-wrapper
    - @verbs.each do |label|
      %a.like-button
        %span.like-icon
          .heart-animation-1
          .heart-animation-2
        #{label}

Like Animation — Jumpy Hearts.markdown

Like Animation — Jumpy Hearts

Forked from Wojtek Witkowski's Pen Like Animation — Jumpy Hearts.

A Pen by Denzil Doyle on CodePen.

License.

script.js

$('a.like-button').on('click', function() {
  $(this).toggleClass('liked');
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.scss

$gray: #c7c7c7;
$pink: #ff6e6f;
$bezier: cubic-bezier(.175, .885, .32, 1.275);

body {
  font-size: 16px;
}

.middle-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 95vh;
}

.like-wrapper {
  display: flex;
  justify-content: space-around;
  flex-flow: row wrap;
  width: 50%;
}

.like-button {
  border: 2px solid $gray;
  border-radius: 40px;
  padding: .45rem .75rem;
  color: darken($gray, 25%);
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: all .25s $bezier;
  filter: grayscale(100%);
  user-select: none;
  
  &.liked {
    color: $pink;
    border-color: currentColor;
    filter: grayscale(0);
  }
  
  &:hover {
    border-color: currentColor;
  }
}


.like-icon {
  width: 18px;
  height: 16px;
  display: inline-block;
  position: relative;
  margin-right: .25em;
  font-size: 1.5rem;
  background: url('http://wojtek.im/heart-colored.svg') no-repeat center;
  background-size: 100%;
  animation: heartUnlike .25s $bezier both;
}

.liked .like-icon {
  animation: heartPulse .25s $bezier both;
  
    [class^="heart-animation-"] {
      background: url('http://wojtek.im/heart-colored.svg') no-repeat center;
      background-size: 100%;
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 16px;
      height: 14px;
      opacity: 0;

        &::before, &::after {
          content: '';
          background: inherit;
          background-size: 100%;
          width: inherit;
          height: inherit;
          display: inherit;
          position: relative;
          top: inherit;
          left: inherit;
          opacity: 0;
        }
    }
  
    .heart-animation-1 {
      animation: heartFloatMain-1 1s $bezier both;
      
      &::before, &::after {
        width: 12px;
        height: 10px;
        visibility: hidden;
      }
      &::before {
        opacity: .6;
        animation: heartFloatSub-1 1s .25s $bezier both;
      }
      &::after {
        animation: heartFloatSub-2 1s .15s $bezier both;
        opacity: .75;
      }
    }

    .heart-animation-2 {
      animation: heartFloatMain-2 1s .1s $bezier both;
      
      &::before, &::after {
        width: 10px;
        height: 8px;
        visibility: hidden;
      }
      &::before {
        animation: heartFloatSub-3 1s .25s $bezier both;
        opacity: .25;
      }
      &::after {
        animation: heartFloatSub-4 1s .15s $bezier both;
        opacity: .4;
      }
    }
}


// Animations
@keyframes heartPulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
}

@keyframes heartUnlike {
  50% { transform: scale(.75) ; }
}

@keyframes heartFloatMain-1 {
  0% { 
    opacity: 0; 
    transform: translate(0) rotate(0);
  }
  50% { 
    opacity: 1; 
    transform: translate(0, -25px) rotate(-20deg);
  }
}

@keyframes heartFloatMain-2 {
  0% { 
    opacity: 0; 
    transform: translate(0) rotate(0) scale(0);
  }
  50% { 
    opacity: .9; 
    transform: translate(-10px, -38px) rotate(25deg) scale(1);
  }
}

@keyframes heartFloatSub-1 {
  0% {
    visibility: hidden;
    transform: translate(0) rotate(0);
  }
  50% {
    visibility: visible;
    transform: translate(13px, -13px) rotate(30deg);
  }
}

@keyframes heartFloatSub-2 {
  0% {
    visibility: hidden;
    transform: translate(0) rotate(0);
  }
  50% {
    visibility: visible;
    transform: translate(18px, -10px) rotate(55deg);
  }
}

@keyframes heartFloatSub-3 {
  0% {
    visibility: hidden;
    transform: translate(0) rotate(0);
  }
  50% {
    visibility: visible;
    transform: translate(-10px, -10px) rotate(-40deg);
  }
  100% {
    transform: translate(-50px, 0);
  }
}

@keyframes heartFloatSub-4 {
  0% {
    visibility: hidden;
    transform: translate(0) rotate(0);
  }
  50% {
    visibility: visible;
    transform: translate(2px, -18px) rotate(-25deg);
  }
}

styles

<link href="http://wojtek.im/application-ba03e6a156e4f969133ad89c6b95c0c5.css" rel="stylesheet" />