리액트에서 gsap 애니메이션 사용하기

1. 라이브러리 깔기

yarn add gsap

2. 컴포넌트 상단에 Import하기

import { gsap } from "gsap";

3. 애니메이션 적용하고싶은 것에 ref 만들기

//상단에 추가
const carrotRef = useRef();
const blingRef = useRef();

//컴포넌트에 ref 설정
<CarrotEffect ref={blingRef} />
<CarrotImg ref={carrotRef} />

4. useEffect로 애니메이션 적용하기

나는 컴포넌트 들어가자마자 애니메이션이 나올 것이므로
useEffect로 애니메이션을 적용했다

위에서 떨어졌다가 한바퀴 돌면서 커졌다가 작아지는 애니메이션 구현하기

useEffect(() => {
    let tl = gsap.timeline(); //순서대로 gsap 사용하기
    tl.from(carrotRef.current, {
      y: -150, //y -150인 곳에서부터 시작
      duration: 0.5, //애니메이션 적용시간
      ease: "bounce.out", //튕기면서 마무리
    });
    tl.to(carrotRef.current, {
      y: 0,
      rotation: 360, // 360도 회전
      duration: 1.3,
      scale: 1.5, //1.5배 커짐
      ease: "bounce.out",
    });
    tl.to(carrotRef.current, {
      scale: 1, //다시 scale이 1로 줄어듦(원래 크기로)
    });
  }, []);

5. 그 밖의 다양한 속성들

yoyo: true 좌우로 왔다갔다하면서 애니메이션 적용
repeat: -1 애니메이션 반복 횟수. -1이면 무한대로 계속 반복
repeatDelay: 1 반복 지연 시간

6. 라이브러리 공식 문서를 확인하자

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