Join Join
Join

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

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.