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:

015
Title mask effect

In this effect, which I particularly enjoy, we will make the duplicate of each word appear on scroll as it reaches a chosen zone. The words will move inside a mask, in the opposite direction of the scroll. Ready to see how it’s done? Let’s dive in!

HTML Structure

Let’s take a look at the structure of the sentence. Each span word contains the word to animate twice.

<p class="homepage-title t-h1">
    <span class="word">
        <span class="word-hidden">Soundtrack®</span>
        <span class="word-visible">Soundtrack®</span>
    </span> <span class="word">
        <span class="word-hidden">synthesizes</span>
        <span class="word-visible">synthesizes</span>
    </span> ...
</p>

Join Made With Gsap to
unlock the full tutorial

Get access