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:

047
Infinite scroll & deformation

In this effect, we will create an infinite carousel that scrolls with the user's actions. To make things more interesting, the images to the left and right of the viewport will squash before disappearing. 3, 2, 1, here we go!

HTML Structure

The container consists of two lists of images. The second list is a duplicate that will allow us to complete the "infinite" effect. Notice the use of the aria-hidden="true" attribute on the duplicate. This informs screen readers to ignore the content within this section.

<section class="mwg_effect047">        
    <div class="container">
        <ul>
            <li class="media"><img src="./assets/medias/01.png" alt=""></li>
            <li class="media"><img src="./assets/medias/02.png" alt=""></li>
            <li class="media"><img src="./assets/medias/03.png" alt=""></li>
            ...
        </ul>
        <ul id="clone" aria-hidden="true">
            <li class="media"><img src="./assets/medias/01.png" alt=""></li>
            <li class="media"><img src="./assets/medias/02.png" alt=""></li>
            <li class="media"><img src="./assets/medias/03.png" alt=""></li>
        </ul>
    </div>
</section>

Join Made With Gsap to
unlock the full tutorial

Get access