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:

019
Infinite scroll with deformation

In this effect, we will create an infinitely scrolling series of images. In addition to automatic scrolling, the user will be able to navigate through the images by scrolling or dragging. Depending on how intensely the user moves, we will slightly distort the image list by scaling it up. We've got a lot to do, so let's get started!

HTML Structure

The content division contains the list of images to be scrolled. The container division will extend in height depending on the intensity of the scroll and drag. You’ll notice the use of duplicate images. These duplicates will be used to achieve the infinite loop effect.

<section class="mwg_effect019">     
    <div class="container">
        <div class="content">
            <div class="media"><img src="./assets/medias/1.jpg" alt=""/></div>
            <div class="media"><img src="./assets/medias/2.jpg" alt=""/></div>
            <div class="media"><img src="./assets/medias/3.jpg" alt=""/></div>
            ... 
            
            <!-- duplicate -->
            <div class="media"><img src="./assets/medias/1.jpg" alt=""/></div>
            <div class="media"><img src="./assets/medias/2.jpg" alt=""/></div>
            <div class="media"><img src="./assets/medias/3.jpg" alt=""/></div>
            ... 
        </div>
    </div>
</section>

Join Made With Gsap to
unlock the full tutorial

Get access