GSAP (GreenSock Animation Platform)

GSAP은 애니메이션을 쉽게 사용할 수 있는 자바스크립트 라이브러리이다!
CSS 보다 강력하고 제이쿼리보다 20배 이상 퍼포먼스가 좋다고 한다

또, GSAP의 장점은 프레임워크에 구애를 받지 않아서
React, Vue, Angular등 어떠한 프레임워크에서도 사용이 가능하다.

설치 방법

npm i gsap

사용 방법

import React from "react";
import { gsap } from "gsap";
   
export default function App() {
 return (
   <div className="app">
     <div className="box">Hello</div>
   </div>
 );
}

npm 설치가 완료되면 import를 먼저 해준다.

JS에서 사용할때와 다른 점은 리액트에서는 객체로 애니메이션 타겟팅 요소를 정해 useRef 를 이용해야 한다는 점이다.

const boxRef = useRef();

useLayoutEffect(() => {

  gsap.to(boxRef.current, {
    rotation: "+=360"
  });
});

return (
  <div className="App">
    <div className="box" ref={boxRef}>Hello</div> // ref로 연결해줌
  </div>
);

그런데 여기까지 한 이후에 다중요소를 제어하고 싶었는데 전혀 움직이지 않았다 (ㅠ)

다중요소 제어는 gsap.context()

gsap.context() 는 다중 요소를 선택할 수 있고, 애니메이션 정리 기능이 가능하다고 한다.

function App() {
  const app = useRef();  // 범위 지정용 ref 생성
  const circle = useRef();
  
  useLayoutEffect(() => {
    let ctx = gsap.context(() => {
      gsap.to(".box", { rotation: 360 });
      gsap.to(circle.current, { rotation: 360 }); // 
    }, app); // <- * 생성한 ref 이름을 써줘야 한다 * 
    
    return () => ctx.revert();
  }, []);

  return (
    <div ref={app} className="App">
      <div className="box">selector</div>
      <div className="circle" ref={circle}>Ref</div>
    </div>
  );
}

정리를 하자면..

gsap.context()을 사용하면 두 가지 방법으로 선택이 가능하다

1. app 이라는 root ref를 생성하여 그 안의 자식 요소인 '.box' 를 선택하는 방법
2. useref를 사용해서 circle.current 를 선택 하는 방법