Gsap이란?
GreenSock Animation Platform의 약자이며 쉽게 사용할 수 있는 아주 강력한 타임라인 기반의 자바스크립트 애니메이션 라이브러리이다. 가볍고 사용방법이 쉽다.
Setting
방법1
CDN 파일로 가져오기 간편하게 코드 한줄을 추가해주면 된다.
1
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>
방법2
npm 설치 터미널에 작성하고 Enter를 누르면 설치가 진행된다.
1
npm install gsap
기본 메소드
✅ gsap.to()
- 애니메이션의 움직임의 끝나는 점을 지정하는 애니메이션
gsap.to("target", {속성: 속성값, ....});
target : 애니메이션을 적용할 개체를 태그,class명,id로 선택가능 속성(values) : 애니메이션과 관련된 속성을 설정
2초에 걸쳐 x100px로 이동한다.
See the Pen gsap.to() by taewok (@taewok) on CodePen.
✅ gsap.from()
- 애니메이션의 시작 점을 지정하는
x150px에서 시작하며 이동하며 5초 뒤에 원래 자리로 2초에 걸쳐 돌아온다.
See the Pen gsap.from() by taewok (@taewok) on CodePen.
✅ gsap.fromTo()
- 애니메이션의 시작 점과 끝나는 점을 지정하는
gsap.fromTo("target", { 시작 속성: 속성값, .... },{ 끝나는 속성: 속성값, .... });
target : 애니메이션을 적용할 개체를 태그,class명,id로 선택가능 시작 속성 : 애니메이션 시작 위치를 조정(ease, duration, delay, onComplete 사용 못함) 끝나는 속성 : 애니메이션과 관련된 속성을 설정
x200px에서 시작하며 y50px로 2초에 걸쳐 이동한다.
See the Pen gsap.fromTo() by taewok (@taewok) on CodePen.
✅ gsap.timeline()
- 연속적인 애니메이션을 간편하게 설정
위쪽 코드를 기준으로 타임라인 애니메이션들은 순차적으로 실행된다. 중간에 기본 gsap.to(),.from() 등은 타임라인 메소드에 영향이 아니므로 바로 실행된다.
순차적인 애니메이션 옳은 예시
gsap.timeline().to("target",{속성: 속성값...}) 순서1
gsap.timeline().to("target",{속성: 속성값...}) 순서2
gsap.timeline().to("target",{속성: 속성값...}) 순서3순차적인 애니메이션 틀린 예시
gsap.to("target",{속성: 속성값...}) 순서1
gsap.to("target",{속성: 속성값...}) 순서1
gsap.to("target",{속성: 속성값...}) 순서1
gsap.to() 메소드에 delay를 다 계산해가면서 순차적 애니메이션을 할게 아니라면 timeline()을 쓰자!
See the Pen timeline() by taewok (@taewok) on CodePen.
✅ play(), pause(), resume(), reverse(), restart()
- 애니메이션을 멈추거나 재실행하는 등의 핸들링 메소드
See the Pen gsap.play(), .pause(), resume(), reverse(), restart() by taewok (@taewok) on CodePen.
gsap 속성들
| 속성명 | CSS | 설명 |
|---|---|---|
x: 100 | transform: translateX(100px) | 요소를 X축의 100px만큼 이동 |
y: 100 | transform: translateY(100px) | 요소를 y축의 100px만큼 이동 |
xPercent: 50 | transform: translateX(50%) | 요소를 x축의 50%만큼 이동 |
yPercent: 50 | transform: translateY(50%) | 요소를 y축의 50%만큼 이동 |
rotation: 360 | transform: translateY(50%) | 요소가 360도 회전 |
scale: 2 | scale(2) | 요소의 크기를 2배로 |
| 속성명 | 설명 |
|---|---|
delay | 몇초 뒤에 변화가 시작할 것 인지 |
duration | 요소의 변화가 몇초에 걸쳐 일어날건지 |
repeat | 요소의 변화가 끝나고 반복해야 하는 횟수 |
stagger | target이 여러 요소라면 순차적으로 몇초마다 실행할지 결정 |
yoyo | 애니메이션의 반복 여부 기본값(false) |
onComplete | 애니메이션이 끝나면 실행될 함수 |
ease | 속도 효과 옵션 (none, power1 , power2, power3, power4, back, elastic, bounce, rough, slow, steps, circ, expo, sine) |
마치며
혹시 잘못된 정보나 궁금하신 게 있다면 편하게 댓글 달아주세요.
지적이나 피드백은 언제나 환영입니다.