[JS]순차적으로 요소보이기_gsap 라이브러리

gsap 라이브러리를 사용하여 요소가 순차적으로 나타나는 에니메이션을 구현할 수 있다.

순서

1. HTML파일에 JS 파일를을 연동시키고 라이브러리를 추가한다.
   Click! 라이브러리 사용법
2. 순차적으로 보여주고 싶은 요소에 같은 클라스이름을 설정한다.
3. 요소를 순차적으로 나타내기위해 CSS로 opacity:0을 적용하여 처음로딩되면 화면에 요소가 나타나지 않게설정
4. JS파일에 gsap.to를 사용하여 에니메이션 추가.

---

예제

HTML 코드

요소에 동일한 클라스 설정

<div class="inner">
        <h1 class="textani">서울거주</h1>
        <h1 class="textani">즉흥의 끝판왕인 ISFP</h1>
        <h1 class="textani">조만간 '프론트앤드 개발자'</h1>
        <h1 class="textani">문과졸업</h1>
        <h1 class="textani">5년의 싱가폴 생활청산 후 코딩시작</h1>  
</div>

CSS 코드

처음 로딩되었을때 모든요소가 보이지 않게 하기위함

.inner .textani {
  opacity: 0;
}

JS 코드

gsap.to를 사용하여 에니메이션 추가

const fadeinEls = document.querySelectorAll('.inner .textani')

fadeinEls.forEach(function(textanimation,index){
  gsap.to(textanimation,1,{
    delay:(index + 1) * .6,
    opacity:1
  })
})

1. document.querySelectorAll으로 해당태그를 모두 가져옴

2. forEach(function(각각의 요소,index){})를 사용하여 요소의 수 만큼 반복하는 함수 설정
   ✔️ 여기서 '각각의 요소'이름은 설정하기나름
   ✔️ 반복되는 횟수를 index라는 이름으로 받아서 사용
   ✔️ 나타날 요소들을 하나씩 반복해서 처리

3. gsap.to(각각의 요소,지속시간,옵션)을 사용하여 애니메이션 설정
   ✔️ gsap라는 라이브러리의 .to속성으로 각'textanimation'요소를 1초동안 투명도를 1로 만들고 0.6초 간격으로 나타나게함
   ✔️ delay:(index +1).6
   -> 각요소를 순서대로 (delay)보여지게 함.
   -> 첫번째요소 : 0.6초 & 두번째요소:1.2초 ....
   -> index는 0부터 시작하기 때문에 1을 더해주지 않으면 00.6으로 첫요소가 딜레이없이 바로나타남.()