Join Join
Join

120Undulating lines

In this effect, we will make lines of text rise through the screen one by one as the user scrolls. Their letters drift toward the center, briefly line up when the motion slows, then peel apart on the way out. Let’s go!

HTML Structure

The structure is relatively simple. A tall pin-height wrapper will define how long the scroll sequence lasts, and a container inside it will hold our centered text:

<section class="mwg_effect120">
    <div class="pin-height">
        <div class="container">
            <div class="text">
                ...
            </div>
        </div>
    </div>
</section>

Inside the text block, each sentence lives in its own line paragraph:

<div class="text">
    <p class="line">Everything</p>
    <p class="line">Moves</p>
    <p class="line">When You</p>
    <p class="line">Look Away</p>
    <p class="line">Long Enough</p>
</div>

We write each line as a separate paragraph on purpose. That way we already know the order of the travel, and SplitText only has to explode each line into characters later.

Become a member to unlock
the full effect today.

Join now Join now

Discover the platform

See how the platform works: try our free effects.

Try it now Try it now

(No registration or credit card needed)