gsap

1. gsap 기본 문법

1) gsap.from() : ~으로부터
2) gsap.to() : ~로
3) gsap.fromTo() : ~로부터 ~로

• gsap.from('선택자',{변하기 전 속성들})
• gsap.to('선택자',{변할 속성들})

2. 속성

1) timeline

delay를 활용하여 연이은 시간 순으로 동작할 수 있도록 하는 속성이며, 변수를 선언하여 사용한다.

const introMotion = gsap.timeline({
    defaults:{
      stagger:0.1,
      opacity:1,
      duration: .7,
      // 공통값
    }
  })

2) addLabel

세트로 묶인다! 라고 생각하면 쉽다. 즉, 여러가지 애니메이션을 라벨링하여 묶는다. 서로 다른 애니메이션을 동시에 적용시키고 싶을 때 사용한다.

  introMotion
  .addLabel('a')
  .to('.intro .flex-line',{ yPercent:0,  },'a')
  .to('.intro .flex-line img',{ scale:1, },'a')

3) forEach

서로 다른 요소를 선택하여 각자 다르게 애니메이션을 동작시키고자 할 때 사용한다.

const introTextList = document.querySelectorAll('.intro .box-wrap .overflow-hidden');
  introTextList.forEach(element => {
    dataX = element.dataset.x;
    // 엘리먼트에 dataset의 x값을 가지고 오세요!
    gsap.to(element,{
      scrollTrigger:{
        trigger:".intro .box-wrap",
        start:"0% 0%", //[트리거기준 꼭대기] [윈도우좌표 꼭대기]
        end:"100% 10%", //[트리거기준 꼭대기] [윈도우좌표 꼭대기]
        // markers:true,
        scrub:0.4,
      },
      xPercent:dataX
    })
  });

• data-x , data-y값은 html문서의 element값에 미리 설정해 두어야 한다.

4) ScrollTrigger

스크롤 이벤트 생성 시 사용한다. 일회성 이벤트!!! 이므로 scrub 사용은 할 수 없다.

  
  ScrollTrigger.create({
    trigger:".explain",
    start:"0% 80%", //[트리거기준 꼭대기] [윈도우좌표 꼭대기]
    end:"100% 0%", //[트리거기준 꼭대기] [윈도우좌표 꼭대기]
    // markers:true,
    // scrub:0.4,
    onEnter:function(){
      $('.explain').addClass('on');
      explainTextMotion.play();

    }
  })

• onEnter:function(){} : 스크롤트리거에서 해당 스크롤 영역에 도달 시 function을 실행해야 될 경우 사용한다. 이때, explainTextMotion이라는 모션을 만들어두고, 정지(paused:true,)시켜두었다가 해당 스크롤 섹션에 도달했을 때 구현되도록 호출(explainTextMotion.play();)한다.

	const explainTextMotion = gsap.timeline({
    paused:true,
  })
  
  
```js

 explainTextMotion
  .addLabel('a')
  .to('.explain .overflow-hidden .txt-line',{ delay:0.5, yPercent:0, stagger:0.1, },'a')
  .to('.explain .pink-tag .bg',{ scaleX:1},'a+=1')
  .to('.explain .pink-tag span',{color:'#f00'},'a+=1.3')

위에서 서술했다시피 동시에 애니메이션을 적용시키고자 할 때 라벨링 사용!
이 때 애니메이션 실행 속도 제어는 (delay) 'a+=1(초)' 로 가능하다.

5) gsap에서의 queryselect 방식 (forEach문 사용 시 유용)

gsap.utils.forEach(element => {});

• 동일한 애니메이션이 여러 군데에 포진해 있을 경우 반복문을 사용하여 애니메이션을 돌린다. (효율👍) 자바스크립트로 요소선택을 하지 않고 gsap으로 바로 해당 요소들을 선택할 수 있다.

gsap.utils.toArray('.arch .picture').forEach(element => {
    // queryselectorall과 동일 << gsap 방식으로

    gsap.to(element,{
      scrollTrigger:{
        trigger:element.parentElement,
        start:"0% 50%", //[트리거기준 꼭대기] [윈도우좌표 꼭대기]
        end:"100% 80%", //[트리거기준 꼭대기] [윈도우좌표 꼭대기]
        // markers:true,
        // scrub:0.4,
      },
      'clip-path': 'circle(71.4% at 49% 51%)'

    })
// .arch .picture의 img = element.childNodes[1]
    gsap.to(element.childNodes[1],{
      scrollTrigger:{
        trigger:element.parentElement,
        start:"0% 100%", //[트리거기준 꼭대기] [윈도우좌표 꼭대기]
        end:"100% 0%", //[트리거기준 꼭대기] [윈도우좌표 꼭대기]
        // markers:true,
        scrub:0,
      },
      scale:1.5,
    })

  });