SVG Animation using GreenSock (gsap.min.js)

The following source code demonstrates the use of GreenSock (gsap.min.js) to show a sample SVG animation.

Source Code :

<style>
    
body, html {
  width: 100%;
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #333333;
}

</style>
<svg width="360" height="360" viewBox="0 -40 300 420" xmlns="http://www.w3.org/2000/svg">
  <g fill="none" fill-rule="evenodd">
    <path id="hex" fill="#FF6A6A" d="M100 87h100l50 86.603-50 86.602H100l-50-86.602z"/>
    <path id="tri-0" fill="#FF6A6A" d="M149.999.5l49.998 86.6H100z"/>
    <path id="tri-2" fill="#FF6A6A" d="M250 173.5l50 86.603H200z"/>
    <path id="tri-4" fill="#FF6A6A" d="M50 173.5l50 86.603H0z"/>
  </g>
</svg>

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


<script>
    const time = 1.75;
const origins = [
  '100% 100%', // position 0 (top) and 3 (bottom)
  '50% 0%',    // position 1 (top-right) and 4 (bottom-left)
  '0%, 100%'   // position 2 (bottom-right) and 5 (top-left)
];

function nextAnimation(id, position) {
  const originIndex = position % 3;
  gsap.to(id, time, {
    rotation: '+=180',
    transformOrigin: origins[originIndex],
    ease: 'power3.inOut',
    onComplete: nextAnimation,
    onCompleteParams: [id, position + 1]
  });
}

nextAnimation('#tri-0', 0);
nextAnimation('#tri-2', 2);
nextAnimation('#tri-4', 4);

</script>

Follow this video for complete guidance :