스타벅스 랜딩 페이지 예제 (GSAP이용하여 순차적으로 나타나는 visual 배너 만들기)

DEMO+signin

GSAP 사용법

visual안에 있는 요소들이 자연스럽게 순차적으로 나타나는 기능

//visual안에 있는 요소들이 자연스럽게 순차적으로 나타난다.
const fadeEls = document.querySelectorAll('.visual .fade-in');
//forEach()메서드는 배열의 각 요소에 대한 함수를 호출합니다.
fadeEls.forEach(function (fadeEl, index) {
  gsap.to(fadeEl, 1, {
    delay: (index + 1) * .7, //0.7, 1.4, 2.1, 2.8
    opacity: 1
  });
});