[gsap] gsap 사용하는 법 / cdn으로 사용하기

 

 

1. cdn 가져오는 법 https://greensock.com/docs/v3/Installation

(1) 제일 상단 메뉴 docs > installation 섹션에 들어간다

(2) 필요한 효과를 체크 한 후 Browser code부분에 있는 script 코드를 헤더부분에 붙여넣는다.

 

https://cdnjs.com/libraries/gsap

gsap - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

혹은 이 사이트에서 cdn을 가져와도 무방하다.

 

 

 

2. 기본 애니메이션 gsap.to()

 

gsap.to("타겟",{
  rotation : 360,
  x : 100,
  duration : 1
});

해당 애니메이션을 실행하면 타겟이 1동안 x만큼 100으로 이동하면서 360도 회전한다. 

gsap.to("타겟",{
  scrollTrigger : {

  }
})

 

 

    gsap.to(".class", {
        scrollTrigger: {
            trigger: ".class",
            markers: false,
            start: "300px center",
            end: "300px center",
            scrub: true,
        },
        top : '15px',
    });