나 보려고 만든 GSAP 사용법

나중에 나 보려고 작성해두는 gsap 간단 사용법!

gsap 홈페이지 바로가기

---

GSAP & ScrollTrigger CDN

<!-- gsap cdn -->
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>

<!-- gsap ScrollTrigger -->
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script>

ScrollTigger 플러그인 등록

ScrollTrigger 사용하려면 js파일에 플러그인을 등록해줘야함.

// 스크롤트리거 플러그인 불러오기
gsap.registerPlugin(ScrollTrigger);

---

GSAP 기본 사용법

GASP 기본 사용법에는 gsap.to(), gsap.from(), gsap.fromTo() 메소드가 있다. 순서대로 애니메이션의 끝점, 시작점, 시작과 끝점을 정해주는 메소드이다.

gsap.to()

to 메소드는 요소를 기본 상태에서 -> to(끝점)값으로 변경시킨다.

gsap.to()(`타겟요소`, { 애니메이션 속성 : 속성 값, ... });

gsap.from()

from 메소드는 요소를 from(시작점)상태에서 -> 기본상태로 변경시킨다. (to랑 반대)

gsap.from()(`타겟요소`, { 애니메이션 속성 : 속성 값, ... });

gsap.fromTo()

fromTo 메소드는 요소의 첫 시작점(from)과 끝점(to)를 지정할 수 있다.

gsap.fromTo()(`타겟요소`, { from 값(애니메이션 시작점) }, { to 값(애니메이션 끝점)});

See the Pen gsap animation by So-An (@So-An) on CodePen.

gsap.timeline()

gsap.timeline() 메소드를 통해 애니메이션을 순차적으로 실행시킬 수 있다.

const tl = gsap.timeline();
tl.to(".element", { duration: 1, x: 200 });
tl.to(".element", { duration: 1, y: 200 });
tl.to(".element", { backgroundColor: 'pink' });

이렇게 작성하면 순서대로 .element요소가 x축으로 200px 이동한 후, y축으로 200px 이동을 하고 마지막으로 색상이 pink로 바뀌는 애니메이션이 실행된다.

See the Pen gsap timeline by So-An (@So-An) on CodePen.

GSAP 기본 속성

기본적으로 css 속성값은 거의 다 먹는다고 보면된다!
속성 여러개 사용할때 , 꼭 써주고(이거때문에 오류 자주남), px , %같은 단위를 사용하지 않음

gsap.to(`element`, {
	x: 100, //x축으로 100px 이동
  	xPercent : 100, // x축으로 100% 이동
  	y: 100, // y축으로 100px 이동
	yPercent: 100, // y축으로 100% 이동
	rotation: 360, // 360도 회전
  	opacity: 1, // 불투명도
  	duration: 5, // 5초동안 애니메이션 지속
  	ease: none, // 애니메이션 가속도(?)값 링크 첨부해둘테니 참고요망
},5) //5초 딜레이

ease 속성 더 알아보기

---

ScrollTrigger 사용법

GSAP에서 좀 더 나아가면 ScrollTrigger을 통해 스크롤에 반응해서 애니메이션을 작동시킬 수 있다.

ScrollTrigger 기본 사용법

gsap.to('.element', {
    scrollTrigger: '.element', // .element가 뷰포트에 나타났을때 애니메이션 실행 
    x: 500 // x축으로 500px 이동
});

기본적인 사용법은 gsap 사용법과 같지만, scrollTrigger 속성이 추가됐다는게 다르다.
근데 저렇게 사용하면 애니메이션의 시작점과 끝점을 정확하게 잡을순 없다.
그래서 많이 사용하는게 다음과 같은 방법이다

 gsap.to(".element", {
      scrollTrigger: {
        trigger: ".element", // 트리거 대상
        start: "top 75%", // 요소가 뷰포트의 75% 지점에 도달할 때 애니메이션 시작
        end: "top 25%",   // 요소가 뷰포트의 25% 지점에 도달할 때 애니메이션 종료
        scrub: true,      // 스크롤에 따라 애니메이션의 진행이 조절됨
        markers: true     // 시작 및 종료 지점을 표시하는 마커를 보여줌
      },
      x: 500,
      rotation: 360
    });

이번에는 위에 사용했던것과는 다르게 scrollTrigger안에 속성값이 많이 있다.
대충 설명해보자면 .element가 뷰포트의 75%에 도달했을때 애니메이션이 실행되며, .element가 뷰포트의 25%지점에 도달하면 애니메이션이 종료된다.
scrub을 주어 스크롤이 되는동안 애니메이션이 서서히 진행되는 듯한 효과를 주었다.

See the Pen scrollTrigger by So-An (@So-An) on CodePen.

start, end 기준

scrollTrigger 속성중 markers: true 로 주면 저렇게 스크롤바 옆에 start, end가 써있는걸 볼 수 있다. start와 end는 애니메이션의 시작점과 끝점을 정해준다.
마커를 켜놓고 start와 end를 보면서 정해주면 더 쉽게 애니메이션의 시작과 끝을 조절할 수 있음

start: { 트리거대상기준 }, { 스크롤바(뷰포트) 기준 } 으로 작성해주면 된다

 gsap.to(".element", {
      scrollTrigger: {
        trigger: ".element", // 트리거 대상
        start: "top 75%", //트리거대상(.element)의 0%(top)부분과 스크롤바의 75%부분이 만나면 애니메이션이 실행됨
        end: "top 25%", //트리거대상(.element)의 0%(top)부분과 스크롤바의 25%부분이 만나면 애니메이션이 종료됨
      }
    });

tmi) 0% 과 top은 같은 의미이고, 100%과 bottom은 같은 의미이다. + 50%와 center도 같다.

scrub, pin 속성

scrub 속성

• scrub은 스크롤에 따라 애니메이션의 진행을 조절한다.
• true 또는 숫자 값을 사용할 수 있음(숫자가 커질수록 부드럽게 작동)
• 애니메이션의 재사용이 가능하다( 스크롤 벗어났다가 돌아와도 애니메이션이 작동함)

scrub은 위에 예시에 적용되어있으니 생략!

pin 속성

• pin은 요소를 화면에 고정시키는 속성이다( position: sticky 같은 느낌 )
• 가로스크롤 같은거 만들때 사용하면 좋다

See the Pen scrollTrigger pin by So-An (@So-An) on CodePen.

---

일단 이정도로 정리하고 추후에 더 필요한 내용이있으면 조금조금씩 수정해야겠당 :D