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>