Join Join
Join

004Simultaneous words

For this effect, I wanted to make the words of a paragraph appear in a new way. Instead of having them appear from top to bottom, I made them slide from right to left with a stacking effect. The words will slide in from outside the screen to their final position, all linked to the user’s scroll.

HTML Structure

To make the effect easy to implement, you just need to write text inside an element without worrying about separating each word into a span. This element will be the child of a div that we’ll keep pinned to the user’s scroll.

<div class="pin">
    <div class="container">
        <p class="paragraph">David Hockney (1937) is a British artist.</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.