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:

027
Letter by letter

In this effect that I really enjoy, we’ll animate the letters of a word as the user scrolls. Each word will act as a mask to hide a letter and reveal its duplicate. 3, 2, 1, let’s go!

HTML Structure

Each line of my effect will be contained in a list. For each letter, there will be two versions: the one initially visible and the one that exits through the mask.

aa

Here’s the complete structure of the effect:

<ul>
    <li>
        <span class="letter"><span>L</span><span>L</span></span>
        <span class="letter"><span>e</span><span>e</span></span>
        ...
    </li>
    <li>
        <span class="letter"><span>T</span><span>T</span></span>
        <span class="letter"><span>w</span><span>w</span></span>
        ...
    </li>
    ...
</ul>

To create a space between two words on the same line, notice the use of & nbsp;, a non-breaking space.

Join Made With Gsap to
unlock the full tutorial

Get access