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:

025
Randomize & Focus

Maybe my favorite effect in our collection: as the mouse moves, we’ll navigate through a set of cards, highlighting the one closest to the cursor while the others move away. I love the smooth and bouncy feel of the effect—it creates a natural movement, almost like running your hand over them. Let’s dive in and see how it’s done!

HTML Structure

The structure is simple: each card is contained within a div called container.

<div class="container">
    <div class="card">
        <div class="content">
            // Content of the card
        </div>
    </div>
    <div class="card">
        <div class="content">
            // Content of the card
        </div>
    </div>
    ...
</div>

Join Made With Gsap to
unlock the full tutorial

Get access