GSAP
(The GreenSock Animation Platform)
: 애니메이션 자바스크립트 라이브러리
Homepage | GSAP
GSAP is an industry standard JavaScript animation library from GreenSock that lets you craft high-performance animations that work in every major browser.
gsap.com
📌 라이브러리 가져오기
CDN 방식
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
Installation | GSAP | Docs & Learning
GSAP is "framework agnostic", this means it can be used in React, Webflow, Wordpress, or any other JS/Web frameworks. The core GSAP file and all the plugins are just Javascript files.
gsap.com
GSAP 기본 문법
📌 gsap.to()
gsap.to ("타겟", {
속성값,
});
- 가장 기본적으로 사용되는 속성
- animate()
📌 gsap.from()
: 시작값을 정하고 원래대로 되돌아오는 애니메이션 실행
gsap.form ("타겟", {
속성값,
});
📌 gsap.fromTo()
: from 속성이 시작값으로 설정되고 to속성이 종료값으로 설정되어 애니메이션 실행
gsap.fromTo ("타겟", {
{ 시작 속성: 시작 속성값 },
{ 끝나는 속성: 끝나는 속성값}
);
📌 gsap.timeline()
: 애니메이션의 타이밍을 설정, 관리
gsap.timeline("타겟", {
속성: 속성값
});
기타 문법
gsap.to() | GSAP | Docs & Learning
Returns : Tween
gsap.com