gsap 웹 애니메이션 라이브러리

CDN으로 가져오기

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

<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/

GSAP 시작하기

환영! 이 기사에서는 GSAP의 핵심 기본 사항을 다루고 일부 HTML 요소에 애니메이션을 적용합니다. 그것이 최종 목표가 아니더라도 걱정하지 마십시오. 무엇을 애니메이션으로 만들든, 어떤 프레임워크를 사용하든 여기에서 다루는 기술과 원칙

greensock.com

펜 참조 GSAP 기본 트윈 그린삭(@GreenSock) 에 코드펜.

• 에게()
• ()에서
• 에서부터()

에게()

애니메이션이 종료되는 속성, 즉 종료 시점을 지정합니다.

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

.element라는 클래스는 0.6초 동안 100에서 수평으로 애니메이션되고 불투명도 0에서 끝납니다.

()에서

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

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

반대쪽()에서 시작하는 애니메이션으로 적용됩니다.

에서부터()

이 속성은 대상 요소의 시작과 끝을 함께 지정합니다.

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

불투명도가 0인 요소 클래스에서 불투명도 1, 세로 방향 20으로 움직이는 애니메이션입니다.

시작 값 => 종료 값

코드 펜

https://codepen.io/GreenSock/

CodePen의 GreenSock

GSAP(GreenSock 애니메이션 플랫폼) 제작사

codepen.io

쉬움

속도 향상 옵션을 적용하면 속도 변경을 적용하여 다양한 애니메이션을 사용할 수 있습니다.

https://greensock.com/ease-visualizer

경량 비주얼라이저

GreenSock의 이 대화형 도구를 사용하여 GSAP에서 HTML5 애니메이션을 위한 다양한 가속 옵션을 탐색하십시오.

greensock.com

---

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