[라이브러리]gsap

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

일반적으로 애니메이션 효과는 CSS로 처리하거나 제이쿼리(JQuery)에서 제공하는 .animate()나 fadeIn(), SlideDown() 등으로 구현하는 것이 일반적이다.복잡한 애니메이션을 구현하려면 다른 도구의 힘을 빌려야 하는데 GSAP가 그 중 하나이다.

GSAP는 제이쿼리보다 20배 이상 퍼포먼스가 좋고 사용법도 간단하다고 주장한다.

webpack

npm install gsap
import { gsap } from "gsap";

cdn

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

사용법

  gsap.to(
    selector, // 선택자
    1, //애니메이션 동작 시간
    {
      y : size,
      repeat:-1, //반복
      yoyo:true, //애니메이션이한번진행되고 돌아오게
      delay: random(0,delay),
      ease: Power1.easeInOut
      oncomplete: //callback
  })

to() : 지정 객체상태로 애니메이션
from() : to와 정반대로 시작값을 정하고 원래대로 되돌아오는 애니메이션
fromTo() : from 속성이 시작값으로 세팅되고 to 속성이 종료값으로 세팅되어 애니메이션 효과가 나타난다.

gsap.fromTo(선택자, {시작 속성}, {종료 속성});

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

vat gsap1 = gsap.to();
gsap1.play(), .pause(), resume(), reverse(), restart()
애니메이션을 멈추거나 재실행하는 등의 핸들링도 가능하다.

※ Timeline 코드순서대로 실행됨.

var tl = gsap.timeline();
tl.to(".class1", {rotation: -270, duration: 1, ease: "elastic"})
  .to(".class2", {rotation: -360, duration: 1, ease: "elastic"})
  .to(".class3", {rotation: -180, duration: 1, ease: "elastic"});

var tl = gsap.timeline({ defaults: {duration: 1, ease: "elastic"} } );
tl.to(".class1", {rotation: -270}) //child tweens will inherit the duration and from the parent timeline!
  .to(".class2", {rotation: -360})
  .to(".class3", {rotation: -180});
  .addLabel("spin"); //label을 추가해서 시작점을 추가.
  .to(".class3",{rotation:0},"spin") // spin 지점에서 시작.
  .to(".class3",{rotation:0},"spin -=0.5")//  시작점에서 0.5초 전에 시작.