GSAP은 되게 인터랙티브한 라이브러리다
공식 홈페이지 들어간 순간부터 화려한 애니메이션이 내 마음에 들었다..!!
그래서 이번 내 포트폴리오로 만들 웹사이트도 GSAP을 거의 중점으로 사용해보려고 한다.
그러기 위해선 일단 러닝커브가 좀 필요한 라이브러리 같아서 연습 겸 사용법을 익혀보려고 한다 !! 👏🏻
처음에 아무것도 모르고 서치했을 땐,
그냥 gsap을 사용한 react에서 useEffect를 사용한 방법이 나왔어서 이렇게 고대로 연습해봤었다.
-
단일 애니메이션을 쓸거면 바로
gsap.to로 시작해도되지만, -
여러 애니메이션을 쓸 상황이면 useEffect 안에 여러 애니메이션을
변수에 담아서써주면 된다 !
gsap + useRef 사용하기
import { useEffect, useRef } from 'react';
import '../styles/main.scss';
import gsap from 'gsap';
const Main = () => {
const container = useRef();
const circle = useRef();
useEffect(() => {
let tot = gsap.context(() => {
gsap.to('.box', { rotate: 360 });
gsap.to(circle.current, { rotation: 360 });
}, app);
return () => tot.revert(); //정리
});
return (
<div ref={container} className='container'>
<div className='box'>selector</div>
<div className='circle' ref={circle}>
circle
</div>
</div>
);
};
export default Main;
그런데 이 방법 말고 react-gsap에선 react에서 좀 더 편리하게 쓰기 위해 내장객체 Timeline / Tween 를 이용해서 간결한 코드로 작성할 수 있게 해준다고 한다!!
-
단일 애니메이션을 쓸거면
Tween만으로 충분하지만, -
여러 애니메이션을 쓸 상황이면
Timeline안에Tween을 넣어서 순서대로 또는 동시 실행, 지연 시간 추가 등 다양한 제어를 해줄 수 있다!
react-gsap + Timeline 사용하기
import '../styles/main.scss';
import { Timeline, Tween } from 'react-gsap';
const Main = () => {
return (
<div className='app'>
<Timeline target={<div className='box'>box</div>}>
<Tween from={{ opacity: 0 }} to={{ opacity: 1 }} duration={2} />
<Tween to={{ x: '200px' }} />
</Timeline>
</div>
);
};
export default Main;
방금 위에껀 순차실행이었지만,
동시 실행은 position={0}을 사용해서 동시에 시작할 수 있게 해준다
😅 그래서 그냥 둘 중 아무거나 쓰면 되는거 아니야..?
라고 생각한 나는 열심히 서치를 해본 결과
✨ GSAP 관련 정리
- Timeline
- 간단하게 + 순서대로 (순차적일 때) 적합
- 여러 애니메이션 실행 시킬 수 있음
- 코드 간결
- gsap + useRef
- 특정 시점에 트리거 하고 싶을 때 적합
└> 🔎 트리거가 뭐야?
: 어떤 행동이나 이벤트를 시작하는 것
- (조건이 충족 됐을 때 무엇인가 실행되는 상황)
└> 🔎 이건 Timeline도 할 수 있지 않아?
할 수는 있지만, 더 직접적으로 그 특정 시점의 상태에 접근하고 싶을 땐! useRef로 써준다!
특정 시점(ex: 페이지가 로드되거나, 이 버튼을 클릭하면 좌우로 움직이게 해주는 것 )에 정확하게 제어하
