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:

It only takes a few seconds,
but it would mean the world to us!

We are nominated for Awwwards Developer Site of the Year — Feel free to support us with a vote!

Vote here

020
Sliding mouse trail

In this effect, we will make a set of images scroll based on the movement of the mouse. To make the overall animation feel more dynamic, each image will slide according to the direction and origin of the movement.

HTML Structure

The structure here is quite simple. We will simply call the set of images we want for our effect:

<section class="mwg_effect020">
  <div class="medias">
    <img src="./assets/medias/01.png" alt="">
    <img src="./assets/medias/02.png" alt="">
    <img src="./assets/medias/03.png" alt="">
    <img src="./assets/medias/04.png" alt="">
  </div>
</section>

Join Made With Gsap to
unlock the full tutorial

Get access