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:

004
Simultaneous 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>

Join Made With Gsap to
unlock the full tutorial

Get access