Animated SVG 'likes' (GSAP) [WIP]fork

animated-svg-likes-gsap-wip-fork.markdown

Animated SVG 'likes' (GSAP) [WIP]fork

A Pen by IpsumLorem16 on CodePen.

License.

index.html

<svg xmlns="http://www.w3.org/2000/svg" width="1109" height="696" viewBox="0 0 1109 696" fill="none">
<path d="M900.344 26.0035C885.692 1.24712 856.706 0.0933826 856.706 0.0933826C856.706 0.0933826 828.46 -3.51862 810.34 34.1855C793.452 69.3289 770.143 103.261 806.588 111.487L813.171 90.9981L817.248 113.013C822.437 113.386 827.642 113.475 832.841 113.279C871.871 112.019 909.041 113.648 907.844 99.6425C906.253 81.0242 914.441 49.824 900.344 26.0035Z" fill="#2F2E41"/>
<path d="M825.557 663C949.269 663 1049.56 657.18 1049.56 650C1049.56 642.82 949.269 637 825.557 637C701.846 637 601.557 642.82 601.557 650C601.557 657.18 701.846 663 825.557 663Z" fill="#3F3D56"/>
<path d="M290.557 666C447.406 666 574.557 660.18 574.557 653C574.557 645.82 447.406 640 290.557 640C133.709 640 6.5575 645.82 6.5575 653C6.5575 660.18 133.709 666 290.557 666Z" fill="#3F3D56"/>
<path d="M633.557 696C773.286 696 886.557 690.18 886.557 683C886.557 675.82 773.286 670 633.557 670C493.829 670 380.557 675.82 380.557 683C380.557 690.18 493.829 696 633.557 696Z" fill="#3F3D56"/>
<g class="leaf">
  <path d="M738.819 597.129C739.741 628.687 721.302 640.253 698.161 640.929C697.623 640.944 697.088 640.954 696.555 640.958C695.482 640.966 694.42 640.948 693.367 640.904C672.439 640.035 655.873 628.926 655.015 599.577C654.128 569.204 691.827 529.741 694.656 526.822L694.661 526.819C694.768 526.708 694.823 526.652 694.823 526.652C694.823 526.652 737.898 565.574 738.819 597.129Z" fill="#6C63FF"/>
  <path d="M696.495 636.146L711.194 614.286L696.525 638.498L696.555 640.958C695.482 640.966 694.419 640.948 693.367 640.904L694.096 609.285L694.076 609.041L694.103 608.994L694.173 606.006L678.075 582.633L694.154 603.769L694.211 604.401L694.762 580.511L680.857 556.279L694.801 576.315L694.656 526.822L694.656 526.657L694.661 526.819L695.584 565.826L708.256 549.981L695.625 569.186L695.902 590.555L707.563 569.7L695.945 593.697L696.099 605.579L713.057 576.528L696.15 609.724L696.495 636.146Z" fill="#3F3D56"/>
</g>
<g class="leaf">
  <path d="M83.8192 608.129C84.7408 639.687 66.3015 651.253 43.1607 651.929C42.6232 651.944 42.0881 651.954 41.5554 651.958C40.4823 651.966 39.4195 651.948 38.3672 651.904C17.4387 651.035 0.872526 639.926 0.0154059 610.577C-0.871594 580.204 36.8274 540.741 39.6558 537.822L39.6608 537.819C39.7683 537.708 39.8233 537.652 39.8233 537.652C39.8233 537.652 82.8977 576.574 83.8192 608.129Z" fill="#6C63FF"/>
  <path d="M41.4947 647.146L56.1945 625.286L41.5247 649.498L41.5554 651.958C40.4823 651.966 39.4195 651.948 38.3672 651.904L39.0963 620.285L39.0763 620.041L39.1032 619.994L39.173 617.006L23.075 593.633L39.154 614.769L39.2111 615.401L39.7618 591.511L25.8574 567.279L39.8014 587.315L39.6558 537.822L39.6561 537.657L39.6609 537.819L40.5838 576.826L53.2561 560.981L40.6254 580.186L40.9019 601.555L52.5629 580.7L40.9448 604.697L41.0988 616.579L58.057 587.528L41.1504 620.724L41.4947 647.146Z" fill="#3F3D56"/>
</g>
<path d="M1025.49 626.902L1099.56 516.755L1025.65 638.751L1025.8 651.146C1020.39 651.187 1015.04 651.097 1009.74 650.876L1013.41 491.556L1013.31 490.327L1013.44 490.089L1013.8 475.034L932.683 357.268L1013.7 463.767L1013.99 466.949L1016.76 346.577L946.703 224.48L1016.96 325.431L1016.23 76.0505L1016.23 75.2205L1016.25 76.0368L1020.9 272.582L1084.76 192.745L1021.11 289.514L1022.51 397.184L1081.26 292.102L1022.72 413.014L1023.5 472.884L1108.95 326.506L1023.76 493.77L1025.49 626.902Z" fill="#3F3D56"/>
<path d="M813.526 260.469C813.526 260.469 796.364 306.465 807.348 347.655C818.331 388.845 847.164 487.014 847.164 487.014L885.608 563.216C885.608 563.216 907.576 578.319 920.62 547.426L885.608 481.522L919.879 362.446C926.392 340.179 927.777 316.727 923.93 293.848C921.976 282.542 918.646 271.23 913.068 262.529C913.068 262.529 823.823 248.799 813.526 260.469Z" fill="#2F2E41"/>
<path d="M849.224 478.776L828.629 585.87C828.629 585.87 849.91 600.973 862.267 596.168L882.862 517.22L849.224 478.776Z" fill="#2F2E41"/>
<path d="M831.375 583.811L809.407 628.433L800.482 646.282C800.482 646.282 751.741 692.964 790.185 688.159C828.629 683.353 831.375 676.488 831.375 676.488L838.927 665.504L840.986 669.623C840.986 669.623 851.97 660.699 851.97 657.953C851.97 655.207 847.851 627.06 847.851 627.06L853.343 594.108L831.375 583.811Z" fill="#2F2E41"/>
<path d="M893.846 562.529L905.517 594.108L898.652 621.568C898.652 621.568 871.878 657.953 899.338 655.893C926.798 653.834 931.604 633.925 931.604 633.925L935.723 620.882L939.155 622.255L949.453 603.719L930.231 572.827L917.187 550.172L893.846 562.529Z" fill="#2F2E41"/>
<path d="M966.615 298.913L970.734 320.195C970.734 320.195 987.897 358.639 970.734 360.012C953.572 361.385 953.572 322.254 953.572 322.254L954.945 306.465L966.615 298.913Z" fill="#FFB8B8"/>
<path d="M670.734 188.387L646.707 184.268C646.707 184.268 599.338 159.554 600.025 177.403C600.711 195.252 644.647 203.49 644.647 203.49L657.691 208.295L670.734 188.387Z" fill="#FFB8B8"/>
<path d="M854.716 88.158C872.157 88.158 886.295 74.0196 886.295 56.579C886.295 39.1384 872.157 25 854.716 25C837.275 25 823.137 39.1384 823.137 56.579C823.137 74.0196 837.275 88.158 854.716 88.158Z" fill="#FFB8B8"/>
<path d="M840.986 77.8605C840.986 77.8605 847.851 103.947 835.494 109.439C823.137 114.931 821.764 119.05 821.764 119.05C821.764 119.05 904.144 145.137 910.322 114.245L882.176 98.4555C882.176 98.4555 879.43 76.4875 876.684 75.1145C873.938 73.7415 840.986 77.8605 840.986 77.8605Z" fill="#FFB8B8"/>
<path d="M939.231 132.561C938.74 130.488 937.466 128.684 935.674 127.531C928.505 122.913 909.848 111.188 907.304 112.551C904.144 114.245 879.91 125.845 831.958 111.121C831.958 111.121 795.677 121.11 785.38 127.975C775.082 134.84 753.557 157 753.557 157C753.557 157 655.871 172.762 656.557 181C657.244 189.238 649.557 209 649.557 209C649.557 209 713.557 222 778.557 195C778.557 195 799.11 242.62 797.05 251.545C794.991 260.469 794.991 266.648 811.466 265.275C827.942 263.902 853.343 259.783 866.387 261.842C879.43 263.902 928.172 267.334 928.172 263.902V242.62C928.172 242.62 943.274 316.762 952.885 316.762C962.496 316.762 977.379 310.968 983.558 289L953.557 193L939.231 132.561Z" fill="#D0CDE1"/>
<path opacity="0.2" d="M863.545 335.325L846.59 482.331L849.57 482.674L866.525 335.669L863.545 335.325Z" fill="black"/>
<path d="M893.866 24.746L865.229 9.745L825.682 15.882L817.5 52.02L837.867 51.236L843.557 37.96V51.017L852.956 50.656L858.41 29.519L861.82 52.02L895.23 51.338L893.866 24.746Z" fill="#2F2E41"/>
<path id="heart-bottom" transform="scale(0)" d="M588.983 124.505C587.863 123.379 586.531 122.484 585.065 121.873C583.598 121.263 582.025 120.947 580.437 120.945C578.848 120.943 577.274 121.254 575.806 121.861C574.338 122.468 573.004 123.359 571.881 124.482C570.757 125.605 569.867 126.939 569.26 128.408C568.653 129.876 568.341 131.449 568.343 133.038C568.346 134.627 568.661 136.199 569.272 137.666C569.883 139.133 570.777 140.464 571.904 141.585L588.983 158.664L606.063 141.585C608.318 139.318 609.582 136.249 609.578 133.051C609.574 129.854 608.302 126.788 606.041 124.527C603.779 122.266 600.714 120.994 597.516 120.99C594.319 120.986 591.25 122.25 588.983 124.505V124.505Z" fill="#FF6584"/>
<path id="heart-middle" transform="scale(0)" d="M633.983 64.5051C632.863 63.3787 631.531 62.4844 630.065 61.8735C628.598 61.2625 627.025 60.9469 625.437 60.9448C623.848 60.9426 622.274 61.254 620.806 61.861C619.338 62.4679 618.004 63.3586 616.881 64.482C615.757 65.6054 614.867 66.9394 614.26 68.4076C613.653 69.8758 613.341 71.4494 613.343 73.0381C613.346 74.6268 613.661 76.1995 614.272 77.666C614.883 79.1326 615.777 80.4642 616.904 81.5845L633.983 98.6639L651.063 81.5845C653.318 79.3176 654.582 76.2489 654.578 73.0513C654.574 69.8537 653.302 66.7882 651.041 64.5272C648.779 62.2661 645.714 60.9941 642.516 60.9899C639.319 60.9858 636.25 62.2499 633.983 64.5051V64.5051Z" fill="#FF6584"/>
<path id="heart-top" transform="scale(0)" d="M567.983 8.50513C566.337 6.85675 564.382 5.54894 562.23 4.6564C560.078 3.76387 557.771 3.30411 555.441 3.30341C553.112 3.3027 550.804 3.76106 548.652 4.65228C546.499 5.54351 544.544 6.85014 542.896 8.49752C541.249 10.1449 539.942 12.1007 539.051 14.2533C538.16 16.4058 537.701 18.7129 537.702 21.0426C537.703 23.3723 538.163 25.6791 539.055 27.8311C539.948 29.9831 541.255 31.9381 542.904 33.5845L567.983 58.6639L593.063 33.5845C594.711 31.9381 596.019 29.9831 596.911 27.8311C597.804 25.6791 598.264 23.3723 598.264 21.0426C598.265 18.7129 597.807 16.4058 596.915 14.2533C596.024 12.1007 594.718 10.1449 593.07 8.49752C591.423 6.85014 589.467 5.54351 587.314 4.65228C585.162 3.76106 582.855 3.3027 580.525 3.30341C578.195 3.30411 575.889 3.76387 573.737 4.6564C571.585 5.54894 569.63 6.85675 567.983 8.50513Z" fill="#FF6584"/>
<path d="M520.558 251H68.5575V651H520.558V251Z" fill="#3F3D56"/>
<path d="M484.557 291H105.557V529H484.557V291Z" fill="white"/>
<path d="M326.977 530.42C327.427 530.28 327.867 530.14 328.317 530C346.268 524.223 361.837 512.734 372.65 497.285C383.463 481.835 388.927 463.274 388.207 444.43C387.87 435.383 386.095 426.448 382.947 417.96C375.985 399.138 362.681 383.329 345.325 373.254C327.968 363.178 307.644 359.464 287.846 362.751C268.048 366.038 250.014 376.121 236.845 391.264C223.676 406.408 216.194 425.667 215.687 445.73C215.236 464.127 220.68 482.185 231.226 497.266C241.771 512.347 256.864 523.66 274.297 529.55C274.747 529.71 275.207 529.86 275.657 530H300.407L326.977 530.42Z" fill="#2F2E41"/>
<path d="M277.007 512.11L274.297 529.55L274.227 530H247.697L249.787 516.56L251.207 507.44L277.007 512.11Z" fill="#2F2E41"/>
<path d="M326.977 530.42L327.047 530L328.597 521.45L302.797 516.78L300.407 530L326.977 530.42Z" fill="#2F2E41"/>
<path d="M308.007 456.193C324.295 456.193 337.499 442.988 337.499 426.7C337.499 410.412 324.295 397.208 308.007 397.208C291.719 397.208 278.515 410.412 278.515 426.7C278.515 442.988 291.719 456.193 308.007 456.193Z" fill="white"/>
<path d="M320.128 425.96C325.558 425.96 329.959 421.558 329.959 416.129C329.959 410.699 325.558 406.298 320.128 406.298C314.699 406.298 310.298 410.699 310.298 416.129C310.298 421.558 314.699 425.96 320.128 425.96Z" fill="#3F3D56"/>
<path d="M233.893 353.931C232.596 321.984 260.129 294.925 295.391 293.493C330.653 292.061 360.29 316.797 361.588 348.744C362.886 380.691 338.374 387.949 303.112 389.382C267.85 390.814 235.191 385.878 233.893 353.931Z" fill="#6C63FF"/>
<path d="M384.671 445.289C407.898 439.966 425.372 429.739 423.7 422.447C422.029 415.156 401.845 413.56 378.619 418.884C355.392 424.208 337.918 434.435 339.589 441.727C341.261 449.018 361.444 450.613 384.671 445.289Z" fill="#2F2E41"/>
<path d="M215.283 473.458C238.509 468.134 255.983 457.908 254.312 450.616C252.64 443.325 232.457 441.729 209.23 447.053C186.004 452.377 168.53 462.604 170.201 469.896C171.872 477.187 192.056 478.782 215.283 473.458Z" fill="#2F2E41"/>
<path d="M278.266 481.815C277.804 484.356 277.847 486.964 278.394 489.488C278.94 492.013 279.978 494.405 281.45 496.528C282.921 498.652 284.796 500.464 286.968 501.862C289.14 503.26 291.566 504.217 294.108 504.677C296.65 505.137 299.257 505.092 301.782 504.544C304.306 503.996 306.697 502.956 308.82 501.483C310.942 500.01 312.753 498.134 314.15 495.961C315.546 493.788 316.501 491.361 316.96 488.819C318.894 478.134 310.633 474.353 299.948 472.419C289.263 470.485 280.2 471.13 278.266 481.815Z" fill="white"/>
<path d="M337.557 565H105.557V579H337.557V565Z" fill="#6C63FF"/>
<path d="M484.557 595H105.557V609H484.557V595Z" fill="#6C63FF"/>

  <g id="heart_lines" opacity="0">
  <g class="line-wrapper">
<rect class="heart-line" x="452.207" y="538.432" width="3.30527" height="11.3992" rx="1.65264" fill="#C80000"/>
  </g>
  <g class="line-wrapper">
  <rect class="heart-line" x="452.207" y="538.432" width="3.30527" height="11.3992" rx="1.65264" fill="#C80000"/>
  </g>
  <g class="line-wrapper">
    <rect class="heart-line" x="452.207" y="538.432" width="3.30527" height="11.3992" rx="1.65264" fill="#C80000"/>
    </g>
    <g class="line-wrapper">
    <rect class="heart-line" x="452.207" y="538.432" width="3.30527" height="11.3992" rx="1.65264" fill="#C80000"/>
  </g>
  <g class="line-wrapper">
<rect class="heart-line" x="452.207" y="538.432" width="3.30527" height="11.3992" rx="1.65264" fill="#C80000"/>
  </g>
  <g class="line-wrapper">
  <rect class="heart-line" x="452.207" y="538.432" width="3.30527" height="11.3992" rx="1.65264" fill="#C80000"/>
  </g>
  <g class="line-wrapper">
    <rect class="heart-line" x="452.207" y="538.432" width="3.30527" height="11.3992" rx="1.65264" fill="#C80000"/>
    </g>
    <g class="line-wrapper">
    <rect class="heart-line" x="452.207" y="538.432" width="3.30527" height="11.3992" rx="1.65264" fill="#C80000"/>
  </g>
  </g>
      

<path id="heart_button" d="M453.884 545.129C453.053 544.475 452.137 543.937 451.157 543.528C449.741 542.938 448.222 542.633 446.687 542.631C445.153 542.629 443.633 542.93 442.215 543.516C440.797 544.103 439.508 544.963 438.423 546.049C437.338 547.134 436.478 548.423 435.892 549.841C435.305 551.259 435.005 552.78 435.007 554.314C435.009 555.849 435.314 557.368 435.904 558.785C436.493 560.201 437.357 561.487 438.444 562.569C438.444 562.57 438.445 562.57 438.445 562.571L452.818 576.947L453.878 578.008L454.939 576.947L469.314 562.568L469.317 562.565C471.495 560.375 472.716 557.411 472.712 554.322C472.708 551.233 471.48 548.271 469.296 546.087C467.112 543.902 464.151 542.673 461.062 542.669C458.449 542.666 455.925 543.54 453.884 545.129Z" stroke="#B9B9B9" stroke-width="3"/>
</svg>

script.js

var hearts_tl = gsap.timeline({
  repeat: "infinite",
  defaults: {
    ease: Power3.easeOut
  }
});
hearts_tl
  .fromTo(
    "#heart-bottom",
    { scale: 0, y: 50, x: 40, transformOrigin: "center" },
    {
      duration: 1.6,
      y: -20,
      opacity: 0,
      scale: 0.9
    }
  )
  .fromTo(
    "#heart-middle",
    { scale: 0, y: 50, x: 40, transformOrigin: "center" },
    {
      duration: 1.6,
      y: -20,
      opacity: 0,
      scale: 0.9,
      delay: -1.3
    }
  )
  .fromTo(
    "#heart-top",
    { scale: 0, y: 50, x: 40, transformOrigin: "center" },
    {
      duration: 1.6,
      y: -20,
      opacity: 0,
      scale: 0.9,
      delay: -1.3
    }
  );
leaf_tl = gsap.timeline({
  repeat: "infinite",
  repeatDelay: 1,
  defaults: {
    transformOrigin: "bottom center",
    duration: 2
  }
});
leaf_tl.to(".leaf", {
  rotation: -8,
  ease: "bounce.inOut",
  stagger: 0.7,
  yoyo: true,
  repeat: 1
});

/*heart lines animation*/
function heartLines() {
  let lineWraps, tl;
  //set starting position of heart lines, and make visible
  gsap.set("#heart_lines", {
    transformOrigin: "center bottom",
    y: 10,
    scale: 1.2
  });
  //loop though line wrappers and rotate evenly around 360deg
  lineWraps = document.querySelectorAll(".line-wrapper");
  for (i = 0; i < lineWraps.length; i++) {
    let degrees = i * (360 / lineWraps.length);
    gsap.set(lineWraps[i],{
      rotation: degrees,
      transformOrigin: "center bottom"
    });
  }
  //create timeline
  tl = gsap.timeline()
    .set("#heart_lines", {
      opacity: 1
    })
    .to(".heart-line", {
      transformOrigin: "bottom center",
      duration: 1,
      y: -25,
      height: 3
    })
    .to("#heart_lines", {
      opacity: 0,
      duration: 0.3,
      position: "-=0.3"
    });
  return tl;
}
/* heart shape animation */
function heartShape() {
  let tl = gsap.timeline({
    // repeat: "infinite",
    defaults: {
      transformOrigin: "center center"
    }
  })
    .to("#heart_button", {
      duration: 0.2,
      scale: 0.8
    })
    .to("#heart_button", {
      duration: 0.2,
      fill: "red",
      stroke: "red",
      position: "-=0.15"
    })
    .to("#heart_button", {
      duration: 1.2,
      scale: 1,
      ease: "elastic.out(1.1, 0.2)"
    });
  
  return tl;
};
// heartShape();
let master = gsap.timeline({
  repeat: 'infinite'
})
master
  .add(heartShape())
  .add(heartLines(), '<0.4')
  .timeScale(1.4);

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.2/gsap.min.js"></script>

style.scss

htlm,body {
  padding:0;
  margin:0;
  height:100vh;
}
svg {
  display:block;
  margin:0 auto;
  max-height:100%; 
  max-width:100%;
  box-sizing:border-box;
  padding:20px;
  overflow:visible;
}