728x90
GSAP란?
GSAP는 GrennSock에서 만든 자바스크립트 애니메이션 라이브러리입니다. css로 애니메이션 효과를 줄 수 있지만 그 이상의 복잡한 애니메이션을 구현할 수 있습니다.
01. 설치
공식 사이트에서 받거나 CDN, 혹은 npm install gsap로 설치할 수 있습니다. CDN이란 Contents Delivery Network의 약자로, 데이터를 분산된 서버에서 받아오는 것을 말합니다. GSAP이나 jQuery의 라이브러리를 호스팅된 서버에 직접 설치해서 사용할 수도 있지만, CDN을 사용하면 클라이언트가 직접 자신의 위치로 라이브러리를 전송받게 됩니다.
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.0/gsap.min.js"></script>
02. gsap.to()
gsap.to에는 2가지 필수값이 필요합니다. 대상과 속성입니다.
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.0/gsap.min.js"></script>
<script>
const slider = document.querySelectorAll(".slider")
let currentIndex = 0;
setInterval(() => {
currentIndex = (currentIndex + 1) % slider.length;
gsap.to(".slider__inner", {
x : -800 * currentIndex
});
}, 2000);
</script>
03. gsap.play(), .pause(), resume(), reverse(), restart()
play()는 애니메이션을 실행하고, pause()는 중단합니다. resume()은 재개하고 reverse()는 반전합니다. restart()는 다시 시작합니다.
var tween = gsap.to(".box1", { duration: 8, x: 400, width: 400, paused: true, });
document.querySelector("#play").onclick = function() { return tween.play(); }
document.querySelector("#pause").onclick = function() { return tween.pause(); }
document.querySelector("#resume").onclick = function() { return tween.resume(); }
document.querySelector("#reverse").onclick = function() { return tween.reverse(); }
document.querySelector("#restart").onclick = function() { return tween.restart(); }
04. TimeLine
delay를 사용해서 애니메이션을 순차적으로 실행할 수 있습니다.
var tl = gsap.timeline();
tl.to(".box1", { duration: 3, x: 200, ease: 'steps(10)' });
tl.to(".box1", {duration: 3, y: 200, opacity: 1, });
tl.to(".box1", { duration: 3, x: 0, width: 200, backgroundColor: 'red', });
tl.to(".box1", { duration: 3, y: 0, height: 200, });
728x90
반응형
'Javascript' 카테고리의 다른 글
| [javascript]mouseenter / mouseover 차이점 (5) | 2022.09.05 |
|---|---|
| [javascript]요소 : 크기 및 위치 (4) | 2022.09.01 |
| [javascript]charAt() / charCodeAt() (3) | 2022.08.22 |
| [javascript]match() (3) | 2022.08.22 |
| [javascript]search() (3) | 2022.08.22 |
댓글