002Images 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>

Become a member to unlock
the full effect
today.

Join now Join now

Get started with free effects

Get a taste of what’s possible with Made With Gsap, completely free

Try it now Try it now

No credit card or account required.
Free for everyone.