gsap 웹 애니메이션을 위한 라이브러리

GSAP (The GreenSock Animation Platform)

: 프론트엔드 개발자와 디자이너들이 쉽게 사용할 수 있는 타임라인기반 애니메이션 자바스크립트 라이브러리

 

 

CDN으로 가져오기

https://greensock.com/docs/v3/Installation?checked=core,scrollTrigger 

 

2023년 2월 기준 최신버전

 

 

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>

 

gsap에 스크롤 이벤트를 적용할 때 ScrollTrigger와 함께 쓰인다.

그러므로 같이 cdn으로 가져왔다.

 

 

 

공식 문서 읽기

https://greensock.com/get-started/

Getting Started with GSAP

 

 

 

 

See the Pen GSAP Basic Tween by GreenSock (@GreenSock) on CodePen.

 

 

• to()
• from()
• fromTo()

 

 

반응형

 

 

기본속성

to()

애니메이션이 끝나는 지점 즉 종료될 때 속성을 지정합니다.

 

gsap.to(".element ", {
  duration: 0.6,
  opacity: 0,
  x: 100
});

타겟 element 에 0.6s동안 가로 x 100만큼 opacity 0 상태로 끝나는 애니메이션이 적용됩니다.

 

 

 

 

 

from()

애니메이션이 시작되는 속성을 지정합니다.

gsap.from(".element ", {
  duration: 0.6,
  opacity: 0,
  x: 100
});

to()와 반대되어 시작되는 애니메이션으로 적용됩니다.

 

 

 

 

 

 

fromTo()

타겟 엘리먼트의 시작과 끝을 함께 지정해주는 속성이다.

gsap.fromTo(".element", {
  opacity: 0,
}, {
  opacity: 1,
  y: 20
});

opacity:0 인 엘리먼트 클래스에서 opacity 1과 세로 20방향으로 이동하는 애니메이션이다.

시작값 => 종료값

 

 

 

 

 

 

 

 

 

 

codepen

https://codepen.io/GreenSock/

GreenSock on CodePen

 

 

 

 

 

 

 

ease

ease 옵션을 적용하면 속도변화를 적용하여 다양한 느낌의 애니메이션을 이용 할 수 있다.

 

https://greensock.com/ease-visualizer

Ease Visualizer

 

 

 

 

 

 

---

https://greensock.com/forums/topic/24946-scrolltrigger-vs-scrollmagic-repeated-section-elements-animation/https://www.reddit.com/r/webdev/comments/heqc2x/scrollmagic_vs_scrolltrigger/