Join Join
Join

034Different 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>

Become a member to unlock
the full effect today.

Join now Join now

Get started with free effects

Get a taste of what’s possible with Made With Gsap, completely free

Try it now Try it now

No credit card or account required.
Free for everyone.