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:

040
Double circular carousel

In this effect, we will rotate two circles in opposite directions, positioned on the left and right sides of the viewport. Each circle consists of multiple items, and when an item reaches the center of the screen, it aligns with its corresponding item in the other circle. The animation progresses as the user scrolls. Let’s get started!

HTML Structure

The container div holds the two circles that we will animate. It will be pinned within the height defined by pin-height, ensuring it stays in the viewport while the user scrolls. At that moment, both circles will rotate.

<div class="pin-height">
    <div class="container">
        <div class="parent-circle parent-circle-left">
            <div class="circle">
                <p class="label">Vuelta</p>
            </div>
            <div class="circle">
                <p class="label">JH42</p>
            </div>
            ...
        </div>

        <div class="parent-circle parent-circle-right">
            <div class="circle">
                <img src="./assets/medias/01.png" alt="" class="media">
            </div>
            <div class="circle">
                <img src="./assets/medias/02.png" alt="" class="media">
            </div>
            ...
        </div>
    </div>
</div>

Join Made With Gsap to
unlock the full tutorial

Get access