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:

034
Different speed columns

In this effect, we’ll create columns of images that scroll at different speeds based on user scroll. Each column will have its own height and loop seamlessly to create an infinite scrolling effect. Let’s dive in!

HTML Structure

Each column consists of a container and a series of images. The images are duplicated to create a seamless loop. I also specify the width and height for each image to ensure the correct aspect ratio before loading, preventing layout shifts.

<div class="col">
    <div class="container container1">
        <img class="media" width="706" height="854" src="01.png" alt="">
        <img class="media" width="707" height="854" src="02.png" alt="">
        <img class="media" width="926" height="719" src="03.png" alt="">
        ...
        <!-- Duplicate images -->
        <img class="media" width="706" height="854" src="01.png" alt="">
        <img class="media" width="707" height="854" src="02.png" alt="">
        <img class="media" width="926" height="719" src="03.png" alt="">
        ...
    </div>
</div>

Join Made With Gsap to
unlock the full tutorial

Get access