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>