Join Join
Join

022Progressive 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>

Become a member to unlock
the full effect today.

Join now Join now

Get started with free effects

Get a taste of what’s possible with Made With Gsap, completely free

Try it now Try it now

No credit card or account required.
Free for everyone.