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>