<div id="bg"></div><div id="heartbutton"> <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.0" width="200" height="200" id="mainHeart" preserveAspectRatio="none" viewBox="-50 -50 200 200"> <defs id="defs4" /> <g id="layer1" transform="scale(0.15)" > <path d="M 297.29747,550.86823 C 283.52243,535.43191 249.1268,505.33855 220.86277,483.99412 C 137.11867,420.75228 125.72108,411.5999 91.719238,380.29088 C 29.03471,322.57071 2.413622,264.58086 2.5048478,185.95124 C 2.5493594,147.56739 5.1656152,132.77929 15.914734,110.15398 C 34.151433,71.768267 61.014996,43.244667 95.360052,25.799457 C 119.68545,13.443675 131.6827,7.9542046 172.30448,7.7296236 C 214.79777,7.4947896 223.74311,12.449347 248.73919,26.181459 C 279.1637,42.895777 310.47909,78.617167 316.95242,103.99205 L 320.95052,119.66445 L 330.81015,98.079942 C 386.52632,-23.892986 564.40851,-22.06811 626.31244,101.11153 C 645.95011,140.18758 648.10608,223.6247 630.69256,270.6244 C 607.97729,331.93377 565.31255,378.67493 466.68622,450.30098 C 402.0054,497.27462 328.80148,568.34684 323.70555,578.32901 C 317.79007,589.91654 323.42339,580.14491 297.29747,550.86823 z" id="path2417" style="fill:#ffffff" /> <g transform="translate(129.28571,-64.285714)" id="g2221" /> </g></svg></div>#bg { position:fixed; width:100%; height: 100%; background-color:#1e1e1e;}body { margin:0;}#heartbutton { width: 200px; height: 200px; background: #424242; /* Old browsers */background: linear-gradient(top, #424242 0%, #212123 100%); /* FF3.6+ */background: gradient(linear, left top, left bottom, color-stop(0%,#424242), color-stop(100%,#212123)); /* Chrome,Safari4+ */background: linear-gradient(top, #424242 0%,#212123 100%); /* Chrome10+,Safari5.1+ */background: linear-gradient(top, #424242 0%,#212123 100%); /* Opera 11.10+ */background: linear-gradient(top, #424242 0%,#212123 100%); /* IE10+ */background: linear-gradient(to bottom, #424242 0%,#212123 100%); /* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#424242', endColorstr='#212123',GradientType=0 ); /* IE6-9 */ border: 1px solid #010101; position:relative; display:block; border-radius: 5px; top: 20px; left: 50%; margin-left: -100px;}#layer1 { cursor:pointer;}xxxxxxxxxxvar love = "#FFAEAE";var extraLove = "#FF8484";var superLove = "#FF4545"var index = 0;$(document).ready(function(){ $("#layer1").on("click", function(){ window.console.log("clicked"); if(index === 0){ var clone = $("#mainHeart").clone(false).attr("id","clone1").css({"position":"fixed", "top":20}).appendTo("#heartbutton"); window.console.log($("#clone1").children("g#layer1").find("path")); TweenMax.to($("#clone1"), 1.2, { x:-5, top:10, scaleX:2.2, scaleY:2.2, opacity:0, onStart:function(){ $("#clone1").children("g#layer1").find("path").css("fill",love); $("#mainHeart").children("g#layer1").find("path").css("fill",love); }, onComplete:function(){ $("#clone1").remove(); }}); index += 1; } else if(index === 1) { var clone = $("#mainHeart").clone(false).attr("id","clone2").css({"position":"fixed", "top":20}).appendTo("#heartbutton"); $("#clone2").children("g#layer1").find("path").css("fill",extraLove); $("#mainHeart").children("g#layer1").find("path").css("fill",extraLove); var tl = new TimelineLite({ "paused":true, smoothChildTiming:true, "align":"sequence", onComplete: function(){ $("#clone2").remove(); }}); tl.add( TweenMax.to($("#clone2"), 0.5,{ x: -20, top: -10, opacity:0.6, scaleX: 1.6, scaleY: 1.6, ease: Linear.easeNone }) ); tl.add( TweenMax.to($("#clone2"), 0.6,{ x: 35, top: 60, opacity:0, scaleX: 2.4, scaleY: 2.4, ease: Linear.easeNone })); tl.play(); index += 1; } else if(index === 2) { var clone = $("#mainHeart").clone(false).attr("id","clone3").css({"position":"fixed", "top":20}).appendTo("#heartbutton"); $("#clone3").children("g#layer1").find("path").css("fill",superLove); $("#mainHeart").children("g#layer1").find("path").css("fill",superLove); var tl = new TimelineLite({ "paused":true, smoothChildTiming:true, "align":"sequence", onComplete: function(){ $("#clone3").remove(); }}); tl.add( TweenMax.to($("#clone3"), 0.5,{ x: -50, top: -20, opacity:0.6, scaleX: 2, scaleY: 2, ease: Linear.easeNone }) ); tl.add( TweenMax.to($("#clone3"), 0.8,{ x: 40, top: 60, opacity:0, scaleX: 3.4, scaleY: 3.4, ease: Linear.easeNone })); tl.play(); index += 1; } else { $("#mainHeart").children("g#layer1").find("path").css("fill","#ffffff"); index = 0; } }); });