[카카오테크캠퍼스 선택과정] 스타벅스 예제: 순차적 애니메이션

전역버튼 스타일

요소를 배치할 때, 배치되는 요소가 다른 요소와 묶음이라고 판단된다면 묶음을 기준으로 안에서 배치할 수 있게 만들자.

.title의 위치를 변경하더라도 .btn과 하나의 구역으로 묶여있기 때문에 .btn의 위치 값을 바꾸지 않아도 된다.

<div class="title">
  <img
    src="./images/visual_title.png"
    alt="STARBUCKS DELIGHTFUL START TO THE YEARS"
  />
  <a href="javascript:void(0)" class="btn btn--brown">자세히 보기</a>
</div>

.visual .title {
  position: absolute;
  top: 88px;
  left: -10px;
}
.visual .title .btn {
  position: absolute;
  top: 259px;
  left: 173px;
}

---

순차적으로 요소 보이기

const fadeEls = document.querySelectorAll(".visual .fade-in");
fadeEls.forEach(function (fadeEl, index) {
  gsap.to(fadeEl, 1, {
    delay: (index + 1) * 0.7,
    opacity: 1,
  });
});

배열의 index를 이용하여 순차적으로 delay를 주는 로직