Start learning now
Get started

050
Infinite fullscreen scroll

In this effect, we will scroll through fullscreen images in the form of an infinite zoom. The progression will be controlled by the user's scroll, and it will even be possible to go backward. Shall we see how it works? Let's go!

HTML Structure

Our DOM will consist of a medias division that will contain all the images to be loaded. The container division will hold the 8 images that will scroll, with their URLs updating dynamically.

<section class="mwg_effect050">
    <div class="medias">
        <img src="./assets/medias/1.jpg" alt="">
        <img src="./assets/medias/2.jpg" alt="">
        <img src="./assets/medias/3.jpg" alt="">
        ...
    </div>
    <div class="container" aria-hidden="true">
        <img src="" class="real-image" />
        <img src="" class="real-image" />
        <img src="" class="real-image" />
        <img src="" class="real-image" />
        <img src="" class="real-image" />
        <img src="" class="real-image" />
        <img src="" class="real-image" />
        <img src="" class="real-image" />
    </div>
</section>

Join Made With Gsap to
unlock the full tutorial

Get access