GSAP (순차적 에니메이션)

01.GSAP (순차적 에니메이션)

index.html

<section class="visual">
  <div class="inner">
    <div class="title fade-in">
      <img
        src="./images/visual_title.png"
        alt="STARBUCKS DELIGHTFUL START TO THE YEARS"
      />
      <a href="javascript:void(0)" class="btn btn--brown">자세히 보기</a>
    </div>
    <div class="fade-in">
      <img
        src="./images/visual_cup1.png"
        alt="new OATMEAL LATTE"
        class="cup1 image"
      />
      <img
        src="./images/visual_cup1_text.png"
        alt="오트밀 라떼"
        class="cup1 text"
      />
    </div>
    <div class="fade-in">
      <img
        src="./images/visual_cup2.png"
        alt="new STARBUCKS CARAMEL CRUMBLE MOCHA"
        class="cup2 image"
      />
      <img
        src="./images/visual_cup2_text.png"
        alt="스타벅스 카라멜 크럼블 모카"
        class="cup2 text"
      />
    </div>
    <div class="fade-in">
      <img src="./images/visual_spoon.png" alt="Spoon" class="spoon" />
    </div>
  </div>
</section>

• fade-in 이라는 class 이름을 가진 div 태그들을 순차적으로 나타나게끔 합니다.

main.css

.visual {
  margin-top: 120px;
  background-image: url("../images/visual_bg.jpg");
  background-position: center;
}
.visual .inner {
  height: 646px;
}
.visual .title {
  position: absolute;
  top: 88px;
  left: -10px;
}
.visual .title .btn {
  position: absolute;
  top: 259px;
  left: 173px;
}
.visual .fade-in {
  opacity: 0;
}

• fade-in 이라는 클래스의 이름을 가진 태그에 opacity속성으로 투명도를 설정하여 화면에서 div태그 요소가 보이지 않도록 설정해줍니다.

main.js - JS을 통한 순차적 이미지 출력

const fadeEls = document.querySelectorAll(".visual .fade-in");
fadeEls.forEach(function (fadeEl, index) {
  // gsap.to(요소, 지속시간, 옵션)
  gsap.to(fadeEl, 1, {
    delay: (index + 1) * 0.7, // 0.7, 1.4, 2.1 2.8
    opacity: 1,
  });
});

• fade-in 클래스가 들어간 요소를 querySelectorAll를 통해 모두 가져와 배열로 만듭니다.
• forEach를 통해 각 요소들에 gsap.to 를 사용해서 opacity: 1로 투명도를 변경시켜 다시 div 요소가 보이게 만듭니다.
• 각각 순차적으로 출력되게 하기 위해서 gsap.to의 옵션인 delay(지연시간)를 활용합니다.
• index는 0부터 시작하므로 1을 더한값에 0.7을 곱하여 지연시간이 0.7초 간격으로 fadeEl 요소가 순차적으로 나타나게 해줍니다.
• 이처럼 각 배열 index를 활용해서 delay 값을 일정 배수로 늘려가게 설정함으로써 순차적으로 나타나게 구현할 수 있습니다.