005
Word by word

For this effect, I wanted to make the words of a paragraph appear from the right edge of the screen, moving into their final position. I also staggered the start of each word’s movement for a more elegant result.

HTML Structure

To keep the effect easy to implement, you can write a text inside an element without worrying about wrapping each word in a span. This element will be the child of a division that we’ll later pin to the user’s scroll.

<div class="pin">                    
    <div class="container">
        <p class="paragraph">Henri Matisse (1869→1954) was a French artist</p>
    </div>
</div>

Join Made With Gsap to
unlock the full tutorial

Get access

005 Word by word

HTML Structure

Join Made With Gsap to unlock the full tutorial

005
Word by word

Join Made With Gsap to
unlock the full tutorial