랜더링 애니메이션 구현하기

 

이렇게 화면이 랜더링 될 때 애니메이션이 나오게 하는 것을 해볼 것이다.

이번 예제는 리액트를 사용했으며,

Greensock 

라는 라이브러리를 사용하였다.

greensock.com/

GreenSock

 

이는 애니메이션을 쉽게 만들어주는 라이브러리이다.

먼저, 컴포넌트가 랜더링 될 때, 즉 useEffect가 실행될 때 애니메이션이 실행돼야 한다.

 

useRef를 사용해서 element에 접근한다.

이제 cssRef.current 이런 식으로 element에 접근할 수 있게 되었다.

이제 useEffect를 작성하도록 하자.

 

gsap(GreenSocks)이라는 것을 프로젝트 파일에 불러와서 

TweenLite라는 것을 가져오도록 하자.

또 Power라는 것도 가져와야 하는데, 우리는 Power3라는 것을 가져오도록 하자.

여기서 Power는 

 

이렇게 함수로 표현하면 뭐라 해야 될까... 음 빨라지고 느려지는 애니메이션 주기? 아무튼 그런 개념인데 공식 Docs를 참고하길 바란다.

 

useEffect 될 때 , TweenLite.to에 element, duration , vars를 넘겨주면 된다.

 

그리고 아까 엘레먼트들의 opacity값을 0이라고 세팅해주자.

 

이렇게 해줘야 0 -> 1로 변하는 애니메이션이 보인다.

 

이제 준비는 다 끝났다. 썸네일의 애니메이션처럼 잘 나오는 모습을 볼 수 있을 것이다.

이 애니메이션을 주로 스크롤 애니메이션을 구현할 수 있는데

스크롤 트리거같이 내려가면서 사용자 눈에 보이면 저 애니메이션을 랜더링 하는 멋진 것도 해볼 수 있다.

 

나중에 포트폴리오 사이트를 만들어볼 건데, 이 애니메이션도 사용해 봐야겠다.