Join Join
Join

098Curved scroll reveal

In this effect, we reveal a paragraph line by line and letter by letter along stacked curved SVG paths as we scroll. Each arc straightens while its characters type in, building a flowing ribbon of text. Let’s build it!

HTML Structure

We wrap a scroll hint, a tall pin wrapper, and a viewport-sized container. A placeholder paragraph stores the raw text for measurement while an SVG template defines the arc and an empty <textPath> that will carry each line:

<section class="mwg_effect098">
    <p class="scroll">Scroll</p>
    <div class="pin-height">
        <div class="container">
            <p class="placeholder">Your full paragraph lives here.</p>
            <div class="paths" aria-hidden="true">
                <svg viewBox="0 0 845 80" fill="none">
                    <path d="M0 74.5C135 25.4 278 0 423 0c145 0 288 25.3 422 74.2"/>
                    <text>
                        <textPath startOffset="50%"></textPath>
                    </text>
                </svg>
            </div>
            <div class="footer">…</div>
        </div>
    </div>
</section>

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)