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

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="220" height="220">
   <path id="textpath" stroke-width="1" fill="transparent" d="M170 110c0 33.137-26.863 60-60 60s-60-26.863-60-60 26.863-60 60-60 60 26.863 60 60z" />
  
    <text id="spiralText" class="textgsap" dy="-5" textLength="372" font-size="1vw" fill="#F5DAAE" startOffset="100%">
        <textPath id="textPathElement" class="textgsap" xlink:href="#textpath" startOffset="100%"></textPath>
    </text>
</svg>

<script>
    const text = "בואי ליצור את השיר הבא בהרמוניה מושלמת * בואי ליצור את השיר הבא בהרמוניה מושלמת *";
    const textPathElement = document.getElementById('textPathElement');

    // פיצול הכיתוב לאותיות והוספת כל אות ל-textPath
    text.split('').forEach((letter, index) => {
        const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
        tspan.setAttribute('class', 'letter-'+ index);
        tspan.textContent = letter;
        textPathElement.appendChild(tspan);
    });

    // דוגמת אנימציה עם GSAP עבור כל אות לפי הקלאס שלה
    text.split('').forEach((_, index) => {
        gsap.fromTo(`.letter-${index}`, { opacity: 0.3,scale:0.1 }, { opacity: 2, duration: 3, delay: index * 0.1 ,repeat: -1,easr:'CustomEase'});
    });
</script>