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:

Exciting news! We've hit a huge milestone:
MWG now has 1,000 members! To celebrate it, we’re offering 15% off. Don’t miss out!

Use MILESTONE15 at checkout.
15% off until Sunday, Sept 14.

Get started

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