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:

017
Cursor-linked orientation

In this effect, we will rotate the images of a grid based on the cursor's position. Each image will be oriented directly towards the cursor. The farther an image is from the cursor, the more amplified its rotation will be. 3, 2, 1—let’s go!

HTML Structure

The structure here is extremely simple. We simply call all the images we want to use for our effect.

<div class="container">
    <img class="media" src="./assets/medias/01.png" alt="">
    <img class="media" src="./assets/medias/02.png" alt="">
    <img class="media" src="./assets/medias/03.png" alt="">
    ...
</div>

Join Made With Gsap to
unlock the full tutorial

Get access