gsap 공부 관련 링크 모음

안쓰는 곳이 없는 그 플러그인, gsap.

4~5년 전에 다니던 회사에서 홈페이지를 만들때 애니메이션 효과를 위해 gsap의 tweenmax를 써본적이 있다.

그런데 그 이후로 한번도 사용할 일이 없다보니 사용방법을 자연스럽게 까먹어버림. 몇년 사이에 사용 방법도 좀 달라진것 같고.

gsap와 함께 사용되는 플러그인들도 되게 다양한데, 기본적인 gsap 사용방법과 가장 자주 쓰이는 스크롤트리거 관련된 공부를 해봐야겠다.

 

gsap 라이센스 (무료)

https://gsap.com/community/standard-license/

Standard License

 

위 내용에 따르면, 유료 결제를 하지 않는 무료 라이센스로도 상업적 사이트에 사용 가능하다.

(단, 사이트를 사용하는 것만으로도 수수료를 청구하는 형식은 안됨. '구독료' 를 내야하는 사이트만 아니면 다 ok일듯. 사이트 생성시 고객이 일회성 비용을 지불하는건 가능)

유료 결제를 해야만 쓸수있는 플러그인도 몇 있는데 (ex. smothscroll) 그런건 다른 무료 플러그인으로 대체 해야할듯 하다.

 

 

https://gsap.com/community/cheatsheet/

GSAP 3 Cheat Sheet

- cheat sheet. 말그대로 치트키 같이 주요 코드를 모아둔것. 실제 사용시 참고할만 한것 같다.

 

 

https://velog.io/@kimheewon/GSAP-애니메이션-사용법기초

[GSAP] 애니메이션 사용법(기초)

 

 

https://ifhead.tistory.com/entry/Web-GSAP-%EA%B8%B0%EB%B3%B8-%EC%82%AC%EC%9A%A9-%EB%B0%A9%EB%B2%95

[Web] GSAP 객체 기본 사용 방법

 

 

https://whales.tistory.com/156 

GSAP 트윈맥스(Tween Max) 재대로 톺아보기

- 위 링크는 tweenmax + scrolltrigger 둘다  (https://lpla.tistory.com/107) 여기도 참고

 

 

https://velog.io/@kimkyeonghye/GSAP-ScrollTrigger   

[GSAP] ScrollTrigger

 

 

https://lpla.tistory.com/108?category=965132

[GSAP] 애니메이션 ScrollTrigger - 자주 묻는 질문

 

 

https://webstoryboy.co.kr/1909

01. GSAP Parallax Effect : 기본 애니메이션

- gsap로 패럴랙스 이벤트를 먹힐때 사용할수 있는 다양한 애니메이션을 예제로 제공한다. 굿굿!