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:

003
Card shuffle

Have you ever marveled at the dexterity of dealers shuffling cards? Good news: JavaScript can help us achieve the same effect! In this example, we’ll make cards appear one by one from the bottom of the screen, move them to the center, and fan them out. Are you a casino enthusiast? You’re in the right place.

HTML Structure

The structure here is fairly simple. Each card will be positioned at the edge of a large circle. These circles will rotate to create the fan effect. They’ll be contained within a container div, which will remain pinned throughout the height of the pin-height div.

<div class="pin-height">
    <div class="container">
        <div class="circles">
            <div class="circle">
                <div class="card">...</div>
            </div>
            <div class="circle">
                <div class="card">...</div>
            </div>
            <div class="circle">
                <div class="card">...</div>
            </div>
            ...
        </div>
    </div>
</div>

Join Made With Gsap to
unlock the full tutorial

Get access