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

Discover the platform

See how the platform works: try Effect #000 for free.

Try it now

(No registration or credit card needed)