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:

028
Rotation on drag

This effect presents an infinite list of items that the user can scroll through by dragging. As they do so, the items experience a slight rotation based on the direction of the movement. Let’s take a look! Ready?

HTML Structure

The structure of the effect is relatively simple. The images are inside a container. Notice that the list of items is duplicated to achieve this seamless and infinite effect. We'll come back to this shortly.

<section class="mwg_effect028">
    <div class="container">
        <div class="card"><img src="./assets/medias/1.png" alt=""></div>
        <div class="card"><img src="./assets/medias/2.png" alt=""></div>
        <div class="card"><img src="./assets/medias/3.png" alt=""></div>
        ...
        <!-- Duplicate for the infinite loop -->
        <div class="card"><img src="./assets/medias/1.png" alt=""></div>
        <div class="card"><img src="./assets/medias/2.png" alt=""></div>
        <div class="card"><img src="./assets/medias/3.png" alt=""></div>
        ...
    </div>
</section>

Join Made With Gsap to
unlock the full tutorial

Get access