JavaScript - GSAP (순차적 에니메이션)

01.GSAP란?

• GSAP는 GrennSock에서 만든 자바스크립트 애니메이션 라이브러리이다.

02.설치

• 공식 사이트에서 다운 받거나 CDN, 혹은 npm install gsap로 설치할 수 있다.
• https://greensock.com/docs/v3/Installation
• https://cdnjs.com/libraries/gsap

• cdn

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

03.gsap.to()

• gsap.to에는 두 가지 필수값(대상과 옵션)이 필요하다.
• 지속시간을 작성하지 않으면 기본값인 0.5초로 나타난다.

• gsap.to(대상, 지속시간, 옵션) 또는 TweenMax.to(요소, 지속시간, 옵션)

gsap.to(".box", .5, {
  x: 200
});

TweenMax.to(".box", .5, {
  x: 200
});

• box 클래스를 0.5초동안 오른쪽으로 200px만큼 이동하고 싶다면 위와 같이 작성하면 된다.

• 옵션에서 opacity나 rotate, scale 등 다양한 css를 적용할 수도 있다.

04.gsap.from(), fromTo(), set()

• from()은 to와 정반대로 시작값을 정하고 원래대로 되돌아오는 애니메이션이 실행된다.

gsap.from(".box1", { duration: 3, x: 200, width: 400, opacity: 0.2, ease: 'steps(10)'});

• 시작위치: 200px 지속시간: 3초

• fromTo()는 from 속성이 시작값으로 세팅되고 to 속성이 종료값으로 세팅되어 애니메이션 효과가 나타난다.

gsap.fromTo(".box2", { fontSize: 40 }, { duration: 3, x: 300, fontSize: 16 });

• 시작값: { fontSize: 40 }
• 종료값: { duration: 3, x: 300, fontSize: 16 }

• set()은 애니메이션 효과 없이 즉시 변경된다.

gsap.set(".box3", { x: 100, width: 200, backgroundColor: 'skyblue', });

• background : tomato -> backgroundColor: 'skyblue'

05.gsap.play(), .pause(), resume(), reverse(), restart()

• 애니메이션을 멈추거나 재실행하는 등의 핸들링도 가능하다.

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(); } // 재시작

06.TimeLine

• gsap.to에서는delay를 사용해서 애니메이션을 순차적으로 실행할 수 있습니다.
• delay값이 높을 수록 가장 나중에 실행됩니다.
• 하지만 이렇게 매번 delay값을 설정하는 것은 비효율적인 작업이다.

• GSAP에서 순차적으로 애니메이션을 실행하려면 TimeLine을 사용해야 한다.
• t1에 정의된 속성이 delay값이 아닌 위에서 아래로 적힌 순서에 따라 순차적으로 실행된다.