Join Join
Join

104Wave Bend Content

In this effect, type and images travel along a single SVG path as we scroll down the page. The faster we scroll, the more that straight line bends into a sinusoid. Let's build it!

HTML Structure

The scene is a tall wrapper, a viewport-sized container, and one oversized SVG. Inside it, a straight path carries the visible line while a second hidden path stores the sinusoid shape we'll morph into. A group lists every segment (text or image) in the order they'll travel:

<section class="mwg_effect104">
    <div class="pin-height">
        <div class="container">
            <svg width="2577" height="391" viewBox="0 0 2577 391" fill="none" xmlns="http://www.w3.org/2000/svg">
                <defs>
                    <clipPath id="round-clip" clipPathUnits="objectBoundingBox">
                        <rect width="1" height="1" rx=".08" ry=".08"/>
                    </clipPath>
                </defs>
                <path id="line" d="M0 195H644H1288H1932H2576"/>
                <path id="wave" d="M0.21875 190.5C0.21875 190.5 382.004 0.5 644.219 0.5C906.434 0.5 1051.3 78.1239 1288.22 190.5C1531.72 306 1668.87 390.5 1932.22 390.5C2195.57 390.5 2576.22 190.5 2576.22 190.5" stroke="#FFF" style="opacity:0;"/>
                <g id="track">
                    <text class="segment" fill="#FFF" font-size="350">
                        <textPath href="#line" text-anchor="start">Sync the BPM</textPath>
                    </text>
                    <image class="segment" href="./assets/medias/1.png" height="300" clip-path="url(#round-clip)"/>
                    <text class="segment" fill="#FFF" font-size="350">
                        <textPath href="#line" text-anchor="start">with your heartbeat</textPath>
                    </text>
                    <image class="segment" href="./assets/medias/2.gif" height="300" clip-path="url(#round-clip)"/>
                    <text class="segment" fill="#FFF" font-size="350">
                        <textPath href="#line" text-anchor="start">to feel the pulse</textPath>
                    </text>
                </g>
            </svg>
        </div>
    </div>
</section>

Every child inside #track is a segment. Text blocks rely on <textPath> so the copy hugs the line, while images sit in their own nodes and will be positioned in JavaScript. The #wave path stays invisible, it only serves as the morph target.

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)