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:

002
Images following cursor

In this effect, we’ll scroll through images inside a mask that follows the cursor. The distance traveled by the cursor will determine when the next image is displayed. Ready? Let’s dive in!

HTML Structure

The structure here is relatively simple. The images will be contained within a mask that follows the user’s cursor.

<section class="mwg_effect002">
    <div class="card">
        <div class="medias">
            <img class="media" src="./assets/medias/1.jpg" alt="">
            <img class="media" src="./assets/medias/2.jpg" alt="">
            <img class="media" src="./assets/medias/3.jpg" alt="">
            ...
        </div>
    </div>
</section>

Join Made With Gsap to
unlock the full tutorial

Get access