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:

026
Infinite grid

For this effect, we will create an infinite two-dimensional grid. The user will be able to scroll or drag in any direction to explore it. Let's see how we can achieve this great result in just a few steps! Let's get started!

HTML Structure

The DOM consists of a list of images and 3 duplicates. These duplicates serve as copies to achieve the "infinite" effect. Note the use of the aria-hidden="true" attribute on the duplicates, which informs screen readers to ignore these divisions.

<section class="mwg_effect026">
    <p>all our iconic lamps (scroll everywhere)</p>
    <div class="container">
        <div class="content">
            <div class="media"><img src="./assets/medias/16.png" alt=""></div>
            <div class="media"><img src="./assets/medias/02.png" alt=""></div>
            <div class="media"><img src="./assets/medias/03.png" alt=""></div>
            ...
        </div>

        <!-- duplicates -->
        <div class="content" aria-hidden="true">
            <div class="media"><img src="./assets/medias/16.png" alt=""></div>
            <div class="media"><img src="./assets/medias/02.png" alt=""></div>
            <div class="media"><img src="./assets/medias/03.png" alt=""></div>
            ...
        </div>
        <div class="content" aria-hidden="true">
            <div class="media"><img src="./assets/medias/16.png" alt=""></div>
            <div class="media"><img src="./assets/medias/02.png" alt=""></div>
            <div class="media"><img src="./assets/medias/03.png" alt=""></div>
            ...
        </div>
        <div class="content" aria-hidden="true">
            <div class="media"><img src="./assets/medias/16.png" alt=""></div>
            <div class="media"><img src="./assets/medias/02.png" alt=""></div>
            <div class="media"><img src="./assets/medias/03.png" alt=""></div>
            ...
        </div>
    </div>
</section>

Join Made With Gsap to
unlock the full tutorial

Get access