카드가 위로 올라와서 가운데 쌓이고 원형으로 퍼진후 돌아가는 애니메이션

Inspired by Codrops

아래서 위로 카드가 올라와서 쌓이고
이후 원형으로 흩어져서 회전하고 랜덤으로 하나씩 뒤짚어지는 애니메이션입니다.

Idea 1. 이미지 배치하기

HTML 구조

<div class="card-box">
  <div class="card-group">
     <img class="card-img">
     <img class="card-img">
  </div>
</div>

Idea 2. 카드 가운데로 쌓이게 하기

<script>

tl.from(cardList, {
        y: window.innerHeight / 2 + 200,
        rotateX: -180,
        scale: 2.5,
        opacity: 0,
        stagger: 0.15,
        duration: 0.8,
        ease: "power3.out",
    })


</script>

Idea 3. 카드를 원형으로 배치

<script>

x: (index) =>
  Math.round(
    initialRadius * Math.cos(sliceAngle * index - Math.PI / 2)
  ),

y: (index) =>
  Math.round(
    initialRadius * Math.sin(sliceAngle * index - Math.PI / 2)
  ) - centerOffset,


</script>

Idea 4. 카드 그룹 회전 시키기

<script>

    .to(".card-group", {
        rotation: 360,
        duration: 20,
        repeat: -1,
        ease: "none",
    }, "<")



</script>