A CodePen by Seth Broweleit. Favorited Animation - Animation of items when favorited.

index.html

<div id='myapp'>
<header>
  <h1>app</h1>

  <div class='mycount-outer'>
    <b id="mycount">0</b>
  </div>
</header>
<ul>
  <li>
    <h2>A</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
    <p>Aliquam tincidunt mauris eu risus.</p>
    <p>Vestibulum auctor dapibus neque.</p>
    <button>
      <span class='unfaved'>Add to favorites</span>
      <span class='faved'>In favorites</span>
    </button>
  </li>
  <li>
    <h2>B</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
    <p>Aliquam tincidunt mauris eu risus.</p>
    <p>Vestibulum auctor dapibus neque.</p>
    <button>
      <span class='unfaved'>Add to favorites</span>
      <span class='faved'>In favorites</span>
    </button>
  </li>
  <li>
    <h2>C</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
    <p>Aliquam tincidunt mauris eu risus.</p>
    <p>Vestibulum auctor dapibus neque.</p>
    <button>
      <span class='unfaved'>Add to favorites</span>
      <span class='faved'>In favorites</span>
    </button>
  </li>
  <li>
    <h2>D</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
    <p>Aliquam tincidunt mauris eu risus.</p>
    <p>Vestibulum auctor dapibus neque.</p>
    <button>
      <span class='unfaved'>Add to favorites</span>
      <span class='faved'>In favorites</span>
    </button>
  </li>
  <li>
    <h2>E</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
    <p>Aliquam tincidunt mauris eu risus.</p>
    <p>Vestibulum auctor dapibus neque.</p>
    <button>
      <span class='unfaved'>Add to favorites</span>
      <span class='faved'>In favorites</span>
    </button>
  </li>
  <li>
    <h2>F</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
    <p>Aliquam tincidunt mauris eu risus.</p>
    <p>Vestibulum auctor dapibus neque.</p>
    <button>
      <span class='unfaved'>Add to favorites</span>
      <span class='faved'>In favorites</span>
    </button>
  </li>
    <li>
    <h2>G</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
    <p>Aliquam tincidunt mauris eu risus.</p>
    <p>Vestibulum auctor dapibus neque.</p>
    <button>
      <span class='unfaved'>Add to favorites</span>
      <span class='faved'>In favorites</span>
    </button>
  </li>
    <li>
    <h2>H</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
    <p>Aliquam tincidunt mauris eu risus.</p>
    <p>Vestibulum auctor dapibus neque.</p>
    <button>
      <span class='unfaved'>Add to favorites</span>
      <span class='faved'>In favorites</span>
    </button>
  </li>
    <li>
    <h2>I</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
    <p>Aliquam tincidunt mauris eu risus.</p>
    <p>Vestibulum auctor dapibus neque.</p>
    <button>
      <span class='unfaved'>Add to favorites</span>
      <span class='faved'>In favorites</span>
    </button>
  </li>
    <li>
    <h2>J</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
    <p>Aliquam tincidunt mauris eu risus.</p>
    <p>Vestibulum auctor dapibus neque.</p>
    <button>
      <span class='unfaved'>Add to favorites</span>
      <span class='faved'>In favorites</span>
    </button>
  </li>
    <li>
    <h2>K</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
    <p>Aliquam tincidunt mauris eu risus.</p>
    <p>Vestibulum auctor dapibus neque.</p>
    <button>
      <span class='unfaved'>Add to favorites</span>
      <span class='faved'>In favorites</span>
    </button>
  </li>
    <li>
    <h2>L</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
    <p>Aliquam tincidunt mauris eu risus.</p>
    <p>Vestibulum auctor dapibus neque.</p>
    <button>
      <span class='unfaved'>Add to favorites</span>
      <span class='faved'>In favorites</span>
    </button>
  </li>
  
  </ul>

</div>

script.js

$('button').click(function() {
  var $this = $(this),
    thisParent = $this.parent(),
    thiscompany = thisParent.find('h2'),
    mynumber = $('#mycount'),
    offsetStart = thiscompany.offset(),
    offsetEnd = mynumber.offset(),
    h2Cloned = thiscompany.clone().attr('class', 'h2-cloned');

  if(thisParent.hasClass('favorited')) { //remove fave
    thisParent.removeClass('favorited');
    $('.h2-cloned').stop(true, true);
    mynumber.css('background-color', '#333').stop(true, true).animate({
      borderWidth: 5
    }, 'fast', function() {
      mynumber.text(Number(mynumber.text()) - 1);
      mynumber.css({
        'background-color': 'transparent'
      }).animate({
        borderWidth: 1
      }, 'fast');
    });
    h2Cloned.css({
      left: offsetEnd.left + 8,
      top: offsetEnd.top + 8,
      width: 10,
      height: 10,
      'opacity': '0.5'
    }).appendTo('#myapp').animate({
      left: offsetStart.left,
      top: [offsetStart.top, 'easeOutCubic'],
      width: 62,
      height: 65,
      'opacity': '1'
    }, 950, function() {
      h2Cloned.remove();
    });
  } else { //add fave
    thisParent.addClass('favorited');
    $('.h2-cloned').stop(true, true);
    h2Cloned.css({
      left: offsetStart.left,
      top: offsetStart.top,
      'opacity': '1'
    }).appendTo('#myapp').animate({
      left: offsetEnd.left + 8,
      top: [offsetEnd.top + 8, 'easeOutCubic'],
      width: 10,
      height: 10,
      'opacity': '0.5'
    }, 950, function() {
      mynumber.css('background-color', '#333').stop(true, true).animate({
        borderWidth: 5
      }, 'fast', function() {
        mynumber.text(Number(mynumber.text()) + 1);
        mynumber.css('background-color', 'transparent').animate({
          borderWidth: 1
        }, 'fast');
      });
      h2Cloned.remove();
    });
  }
});

style.css

#myapp{position:relative}
body{margin:0;font-family:arial, sans-serif;font-size:14px;line-height:1em}

header{position:relative;background-color:#999;text-align:center;color:#fff;height:55px;text-shadow:0 1px 0 #000}
h1{margin:0;line-height:45px}
.mycount-outer{position:absolute;right:0;top:0;height:100%;text-align:center;width:55px}
.mycount-outer::before {content: '';height: 100%;display: inline-block;vertical-align: middle;}
header b{display:inline-block;vertical-align:middle;border:1px solid #222;border-radius:2em;width:33px;height:33px;line-height:33px;box-shadow:0 1px 0 rgba(255,255,255,.5),0 1px 0 rgba(255,255,255,.5) inset;}

ul,ul *{box-sizing:border-box}
ul{margin:10px;padding:0;text-shadow:0 1px 0 #fff}
li{display:inline-block;vertical-align:top;width:300px;height:200px;background-color:#ddd;margin:10px;padding:10px;border-radius:.5em}
h2{float:left;font-size:3em;padding:0 15px;margin: 0 .25em .25em 0;line-height:1.5em;border:1px solid #333;border-radius:5px;box-shadow:0 1px 0 rgba(255,255,255,.8),0 1px 0 rgba(255,255,255,.8) inset}
p{margin:0 0 1em}
button{background-color:#fff;border:1px solid #000;padding:5px 15px;border-radius:1em}

.favorited{background-color:gold}
.faved{display:none}
.favorited .faved{display:block}
.favorited .unfaved{display:none}

.h2-cloned{
  position:absolute;
  z-index:99999;
  font-size:3em;
  padding:0 15px;
  line-height:1.5em;
  border:1px solid #000;
  border-radius:.25em;
  background-color:#ddd;
  -webkit-transform: translate3d(0, 0, 0);
  box-sizing:border-box
}