Join Join
Join

118Floaty Letters Reveal

In this effect, we give headlines a bit of personality. Letters tumble in with a soft bounce and a slight twist: as we scroll through a pinned sentence, reveal a title once, or swap quotes on click. Let's begin!

HTML Structure

The effect is built from three small scenes that share the same letter animation. We start with a tall scroll section: a pin-height wraps a viewport-sized container, and inside it sits the sentence we will split word by word:

<section class="mwg_effect118">
    <section class="mwg_effect118-1">
        <div class="pin-height">
            <div class="container">
                <p class="sentence">A little chaos never hurt. Especially when it knows where to land.</p>
            </div>
        </div>
    </section>

Next comes a one-shot title over a background image. The sentence will reveal once as it enters the viewport:

    <section class="mwg_effect118-2">
        <img class="media" src="./assets/medias/background.png" alt="">
        <div class="sentence">The office</div>
    </section>

Finally, a stack of quotes shares the same grid cell, and a row of person buttons lets us switch between them:

    <section class="mwg_effect118-3">
        <div class="quotes">
            <p class="quote">“The right motion can change how things feel”</p>
            <p class="quote">“A good song can fix almost anything somehow”</p>
            <p class="quote">“Everything feels better on a Friday afternoon”</p>
        </div>
        <div class="persons">
            <button type="button" class="person" aria-label="Quote 1">
                <img src="./assets/medias/1.png" alt="">
            </button>
            <button type="button" class="person" aria-label="Quote 2">
                <img src="./assets/medias/2.png" alt="">
            </button>
            <button type="button" class="person" aria-label="Quote 3">
                <img src="./assets/medias/3.png" alt="">
            </button>
        </div>
    </section>
</section>

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)