gsap에 대한 알아보기

gsap이란?

• The GreenSock Animation Platform의 줄임말로 프론트엔드 개발자와 디자이너들이 쉽게 사용할 수 있는 애니메이션 자바스크립트 라이브러리이다.

gsap의 종류

• gsap.to(): 움직임의 끝의 값을 정의
• gsap.from(): 움직임의 시작 값을 정의
• gsap.fromTo(): 움직임의 시작과 끝의 값을 정의
• stagger: 시간차를 두고 애니메이션을 실행하게 해줌
• gsap.timeline: 순차적으로 애니메이션을 구현하고 싶을 때 사용함.

  const motion = gsap.timeline({
      defaults:{
        duration:.5,
        delay:0.5
      },
      paused:true
    }); 

• addLabel(원하는 이름으로 네이밍을 하면된다.): 두가지를 동시에 구현하고 싶을 때 사용함

.addLabel('a')
    .to('.box2',{x:200},'a')
    .to('.box3',{y:-200},'a')

• scrollTriger: 스크롤을 할 때 애니메이션을 작동되게 하는거
• markers: true or false: 시작과 끝지점을 마킹해준다.
• start: "트리거 윈도우": 시작지점과 윈도우 어느지점에서 만나면 시작할건지를 정하는거
• end: "트리거 윈도우":시작지점과 윈도우 어느지점에서 만나면 끝낼건지를 정하는거
• scrub: ScrollTrigger의 이벤트가 스크롤이 사용될때만 재생되도록 만들어주는 속성으로 스크롤이 멈추면 이벤트도 중간에 멈춘다.
• pin: 특정 element가 고정되도록 만들어주는 속성.