순차적 애니메이션 - 순차적으로 요소 보이기(GSAP)

GSAP 라이브러리를 이용해 요소들이 시간차를 두고 순차적으로 출력하게 제작한다.
for문을 이용해 요소마다 딜레이를 다르게 한다.

코드

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
  });
});