React 에서 gsap 사용하기

gsap 만으로 모든 애니메이션 기능을
만들수 있는 유용한 라이브러리 입니다.

 

설치

npm install @gsap/react gsap

 

기본 사용법

import gsap from 'gsap';

import { ScrollTrigger } from 'gsap/ScrollTrigger';

// GSAP 플러그인 등록

gsap.registerPlugin(ScrollTrigger);

 const About = () => {

 useGSAP(() => {

  gsap.to(".a", {

   x: 400,

   rotate: 360,

   repeat: -1,     // 무한히 반복

   yoyo: true,    // 앞뒤로 애니메이션 반복

   duration: 3   // 애니메이션 시간 설정

  })

})

 

 return (

   <div className="a"></div>

  )

 

scrollTrigger

기본

  gsap.to(".b", {

    scrollTrigger: ".b",

    x: 400,

    rotate: 360,

  })

 

이렇게 설정하면 View 에서 보이자 마자 애니메이션이 실행됩니다.

toggleActions 

gsap.to(".b", {

  scrollTrigger: {

  trigger: ".b",

  toggleActions: "restart pause reverse none"

  },

  x: 400,

  rotate: 360,

  duration: 3

  })

})

 

• 첫 번째 restart: .b 요소가 화면에 들어오면 애니메이션을 처음부터 다시 시작합니다.
• 두 번째 pause: .b 요소가 화면에서 사라질 때 애니메이션이 멈춥니다.
• 세 번째 reverse: .b 요소가 화면에 다시 들어올 때 애니메이션을 반대로 실행합니다.
• 네 번째 none: .b 요소가 화면에서 다시 사라질 때는 아무 행동도 하지 않습니다.

resume 라는 옵션도 있는데 만약 3번째 reverse 에 넣으면 정지됐던 애니메이션이 다시 재개 된다.

 

"start" and "end"

애니메이션이 어디서 실행될지 정해줍니다.

 

설정값 :   top, center, bottom, px, %

 

즉 start 지점이 top cetner 라면 

element 기준으로 맨 위에서 View 기준으로 가운데로 맞춰줬을 때 실행됩니다. 

 

end 는 애니메이션이 어디서 끝날지 정해줍니다. bottom bottom 이면 element 가 완전히 사라질 때 애니메이션이 멈추겠죠!!

start: "top center"    =>      start , scroller-start

end:   "top, 100px"   =>      end   , scroller-end

 

scrub

애니메이션이 스크롤에 따라 동작하게 합니다.

즉 전에는 요소가 보이면 애니메이션이 자동으로 동작했는데 scrub 이라는 기능을 적용하면 

View 기준으로 스크롤할때 애니메이션이 스크롤에 따라 동작하게 됩니다.

 

gsap.to(".b", {

  scrollTrigger: {

  trigger: ".b",

  start: "top, center",

  end: "top, top",

  scrub: 3,

  },

  x: 400,

  rotate: 360,

  ease: "none",

  duration: 3

  })

})

 

scrub: true 가 일반적이지만 저렇게 숫자를 넣어 주면 스크롤할 때 즉각 반응하는것이 아니라 스크롤 속도에 따라 동적으로 바뀝니다.

 

만약 이러한 코드가 있다면 밑에 영상처럼 작동합니다.

b 가 className 인 Box 기준으로 애니메이션이 작동됩니다.

 

gsap.to(".ghost", {

  scrollTrigger: {

  trigger: ".b",

  start: "top, center",

  end: "top, top",

  scrub: true,

  },

  x: 400,

  rotate: 360,

  ease: "none",

  duration: 3

})

gsap.to(".b", {

  scrollTrigger: {

  trigger: ".b",

  start: "top, center",

  end: "top, top",

  scrub: 3,

  },

  x: 400,

  rotate: 360,

  ease: "none",

  duration: 3

  })

})

 

 

애니메이션 2가지 이상 적용하기

 

 

 이렇게 timeline 이라는 기능을 이용하면 애니메이션을 순차적으로 2가지 이상 적용할 수 있습니다.

 즉 x 축으로 400 , 360 도 회전을 한 뒤에 배경이 빨간색으로 바뀌는 애니메이션이 적용됩니다.

 

 

 

 

 

 

 

Pin

스크롤 중에 특정 요소를 고정시켜, 스크롤해도 그 위치에 머물러 있게 하는 기능입니다.

스크롤 애니메이션은 스크롤을 하면 자연스럽게 애니메이션이 적용되면서 element 들이 view 에서 위쪽으로 벗어나기 시작합니다.

하지만 pin 으로 고정을 한다면 스크롤을 하며 애니메이션이 끝날 때 까지 그 자리에서 애니메이션이 적용되다가 애니메이션이 끝나면

요소가 화면밖으로 벗어날 수 있습니다. 

 

 

검은색 박스를 보시면 스크롤해도 view 기준으로 올라가는 것이 아니라 그 위치에서 애니메이션이 적용됩니다.

 

스크롤할 시 좌 , 우 움직이는 것 처럼 만들기

 

<View/> 를 하나 안붙여주면 왜인지 마지막에 애니메이션이 끊기기 때문에 이렇게 해주어야 한다.

end: "+=10000" 은 container 기준으로 스크롤을 10000px 해야 Box 들의 애니메이션을 끝낼 수 있습니다.