Start learning now
Get started

Thank you for your interest and welcome!

We’ve just sent you an email! Check your inbox (and spam folder) and save our email so you don’t miss what’s next!

Meanwhile, rendez-vous here:

032
Circular sentence

In this effect, we will animate a sentence along a curved SVG path, with its progression linked to the user's scroll. Let’s dive in!

HTML Structure

The structure is quite simple: the container division holds the SVG with the sentence we’ll animate.

<div class="pin-height">
    <div class="container">
        <svg width="1516" height="92" viewBox="0 0 1516 92" fill="none"
            <path id="path" d="M0 92.0674C528.5..." stroke="none"/>
            <text id="text">
                <textPath id="textpath" xlink:href="#path" startOffset="100%" text-anchor="start">King Gizzard & The Lezzard Wizzard s'il te plait</textPath>
            </text>
        </svg>
    </div>
</div>

Join Made With Gsap to
unlock the full tutorial

Get access