GSAP JS 애니메이션 극대화하기

출처 : https://greensock.com/get-started/

 

GSAP이란
자바스크립트 쓰는 곳 어디든지 갖다쓸수있는 애니메이션 플러그인
캔버스태그써서 three.js, pixi.js랑 써도되고 리액트같은데도 당연히 쓸수있고 
그냥 플러그인 자체만으로도 사용가능 

 

자주쓰이는 플러그인은 
1. splitText 2. Draggable 3.MorphSVGPlugin 4.DrawSVGPlugin 5..MotionPathPlugin

초간단 사용법 

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
cdn으로 불러와주고 
박스 하나 만들어서 색깔, 크기값 주기 
html: <div class="box">div1</div>
css: div { width: 100px; height: 100px; background: skyblue; }

script에 구문 작성 //{ }안에 rotation, opacity, scale 등등 원하는것 작성 가능

1. 100px짜리 박스가 1초동안 100픽셀 옆으로 이동
gsap.to(".box", {duration: 1, x: 100}); 

2. 원래있던 크기도 무시하고 0에서 지정한 크기만큼 늘이기 
gsap.fromTo(".box", { width: 0, height: 0 }, { duration: 1.5, width: 100, height: 200 });

3. { } 안에 ease: "bounce" 추가하면 바운스되는 효과가 남, 넣을수있는 효과 무궁무진 
-> greensock ease visualizer에서 확인가능 

4. staggers 그룹들 딜레이 걸기 편한 속성 

//박스들 움직이면서 나타나고 
gsap.from(".box", {
  duration: 2,
  scale: 0.5, 
  opacity: 0, 
  delay: 0.5, 
  stagger: 0.2,
  ease: "elastic", 
  force3D: true
});

//박스클릭하면 하나씩 사라짐 
document.querySelectorAll(".box").forEach(function(box) {
  box.addEventListener("click", function() {
    gsap.to(".box", {
      duration: 0.5, 
      opacity: 0, 
      y: -100, 
      stagger: 0.1,
      ease: "back.in"
    });
  });
});

5. 함수만들어 쓰기 
function showMessage(message) { output.innerHTML += message + "</br>"; }
//텍스트 그려넣는 함수 생성 
//{ } 안에 onComplete: showMessage, onCompleteParams: ["done!"] 입력 
//{ }들어가있는 박스 애니메이션이 끝나면 함수실행됨 이 경우 done!이라는 텍스트가 출력 
//함수에 output.innerHTML은 output이라는 변수 만든거임 
//var output = document.querySelector(".box2"); 이런식으로 텍스트 나타날 위치잡은 박스 지정 

6. 컨트롤하기 
document.querySelector(".box").onclick = () => tween.pause();
//박스클릭하면 애니메이션이 정지됨 
//이런식으로 tween.resume, tween.reverse 등등 다양하게 컨트롤가능 

7. 시퀀싱하기 
var tl = gsap.timeline({repeat: 30, repeatDelay: 1});
tl.to(".box1", {duration: 1, x: 200});
tl.to(".box2", {duration: 1, x: 200, scale: 0.2});
tl.to(".box3", {duration: 1, x: 200, scale: 2, y: 20});
//시간차를 두고 박스 세개가 옆으로 움직이고 커지고 모션이 들어감 

이 코드를 메소드체이닝해서 간단하게 작성하고 
tl.to(".box1", {duration: 1, x: 200});
  .to(".box2", {duration: 1, x: 200, scale: 0.2});
  .to(".box3", {duration: 1, x: 200, scale: 2, y: 20});

dafaults 작성하면 이렇게 간단하게 작성 
var tl = gsap.timeline({ defaults: { duration: 1, x: 200 } });
tl.to(".box1", { x: 210 })
  .to(".box2", { scale: 0.2 })
  .to(".box3", { scale: 2, y: 20 });

var tl = gsap.timeline({
  repeat: 1, 
  yoyo: true, 
  onRepeat: onRepeatHandler,
  onComplete: onCompleteHandler
}); //다양한 속성 존재