Join Join
Join

059Path text camera

We often see text forming along a path within the viewport. So why not center the view on the path’s progression? That’s what we’ve done here! Let’s take a look at the process behind this effect.

HTML Structure

The scene is a tall wrapper, a viewport-sized inner frame, and one oversized SVG graphic. Inside it, a stroke defines the path, and a textPath node references that path so the copy hugs the curve:

<section class="mwg_effect059">
    <p class="scroll">Scroll</p>
    <div class="pin-height">
        <div class="container">
            <svg id="mysvg" fill="none" width="3898" height="891" viewBox="0 0 3898 891" xmlns="http://www.w3.org/2000/svg">
                <path id="mypath" d="M0.398438 611.016C175.398 377.517 …" />
                <text id="text">
                    <textPath id="textpath" href="#mypath" text-anchor="start" font-size="180">
                        Scroll-driven text that flows smoothly along the curve you designed
                    </textPath>
                </text>
            </svg>
        </div>
    </div>
</section>

As we scroll, the camera will follow the last letter that appears along the path, keeping it centred in the viewport while the sentence types itself out. Here's the path we're gonna use for this example:

Become a member to unlock
the full effect today.

Join now Join now

Discover the platform

See how the platform works: try Effect #000 for free.

Try it now Try it now

(No registration or credit card needed)