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 :