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:

038
Dynamic list scrolling

One of my favorite effects! When the user scrolls, a section moves horizontally. Depending on the scroll progress, a specific image appears, just like in a flick book. Got your coffee? Glasses on? Let’s dive in!

HTML Structure

We’ll define a height for the pin-height div, which will determine the scrolling distance. The container div will hold the list of projects, placed one after the other.

<section class="mwg_effect038">
    <div class="pin-height">
        <div class="container">
            <div class="project">
                <div class="datas">
                    <p class="label">Kara Fall Collection</p>
                    <p class="year">2024</p>
                </div>
                <img class="media" src="./assets/medias/01.png" alt="">
            </div>
            <div class="project">
                <div class="datas">
                    <p class="label">MNR®STUDIO</p>
                    <p class="year">2024</p>
                </div>
                <img class="media" src="./assets/medias/02.png" alt="">
            </div>
            ...
        </div>
    </div>
</section>

Join Made With Gsap to
unlock the full tutorial

Get access