Join
Join

015Title 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>

Become a member to unlock
the full effect today.

Join now

Discover the platform

See how the platform works: try Effect #000 for free.

Try it now

(No registration or credit card needed)