Start learning now
Get started

Thank you for your interest and welcome!

We’ve just sent you an email! Check your inbox (and spam folder) and save our email so you don’t miss what’s next!

Meanwhile, rendez-vous here:

022
Progressive sentences

In this effect, we will make multiple paragraphs appear word by word to keep the user engaged while scrolling through the page. The idea is to make the words of one paragraph disappear at the same time as the words of the next paragraph appear.
Our approach will be dynamic: if we decide to add one or more paragraphs, the effect will continue to work seamlessly. Thank you, JavaScript!

HTML Structure

The structure is relatively simple: the container division contains the various paragraphs we will animate.

<div class="pin-height">
    <div class="container">
        <div class="paragraphs">
            <p class="paragraph">NeoSwiss® is a new font aiming ...</p>
            <p class="paragraph">Inspired by Helvetica, it preserves ...</p>
            <p class="paragraph">With exceptional legibility and a ...</p>
        </div>
    </div>
</div>

Join Made With Gsap to
unlock the full tutorial

Get access