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

015 Title mask effect

HTML Structure

Join Made With Gsap to unlock the full tutorial

015
Title mask effect

Join Made With Gsap to
unlock the full tutorial