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:

007
Rounded trajectory

In this effect, we will scroll images as if they were following a rounded trajectory. In reality, each image will be positioned at the edge of a large division that extends beyond the viewport. We’ll simply rotate this division to create the desired effect. Ready to roll up your sleeves? Let’s go!

HTML Structure

The container will remain pinned while the user scrolls through the entire height of the pin-height division. Each image will be a child of a circle division, which will rotate.

<div class="pin-height">
    <div class="container">
        <div class="circle">
            <img class="media" src="./assets/medias/1.png" alt="">
        </div>
        <div class="circle">
            <img class="media" src="./assets/medias/2.png" alt="">
        </div>
        ...
    </div>
</div>

Join Made With Gsap to
unlock the full tutorial

Get access