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:

044
Mask effect

In this effect, we will move a gradient mask based on the position of the user’s cursor. To make the effect more interesting, the mask will reveal a duplicate of the component’s content but with different colors and another image. Do you have your concentration music on? Then let’s go!

HTML Structure

The containers division will be made up of a child and its duplicate. The duplicate will be positioned on top of the original content. The aria-hidden="true" attribute is used on the duplicate. This tells screen readers to ignore this division.

<div class="root">
    <div class="containers">
        <div class="container">
            ...
        </div>
        <div class="container duplicate" aria-hidden="true">
            ...
        </div>
    </div>
</div>

Join Made With Gsap to
unlock the full tutorial

Get access