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:

006
Progressive sentences

In this effect, we will make a paragraph disappear word by word while making the next one appear in the same way. Our logic will be dynamic: if we add one or more paragraphs, the effect will continue to work. Thank you, JavaScript!

HTML Structure

The structure here is relatively simple: the container div contains the different paragraphs we are going to animate.

<div class="pin-height">
    <div class="container">
        <p class="paragraph">“We met Vincent at Venice Beach’s Skate Park.</p>
        <p class="paragraph">He’s got that rare blend of precision.</p>
        <p class="paragraph">He’s been at it since he was a kid.”</p>
    </div>
</div>

Join Made With Gsap to
unlock the full tutorial

Get access