07-02-2022 TIL // react-scroll-motion

react-scroll-motion

화면을 스크롤할시 애니메이션 효과를 구현해보려 했다. 구글링을 굉장히 많이 해봤는데 방법도 다양했다. CSS 작업으로 하나하나 커스텀을 해주거나 observer를 사용하는 방식, 그 중에서 가장 단순하면서도 효과가 상당한 라이브러리를 찾았다.

이름하여 react-scroll-motion

바로 이 방식

코드도 굉장히 간단했다.

<ScrollContainer snap="mandatory">
 <ScrollPage>
   <Animator animation={batch(Fade(), Sticky(), MoveOut(0, -200))}>
     <MediumText>Let't me show you scroll animation 😀</MediumText>
   </Animator>
 </ScrollPage>
<ScrollContainer>

react-scroll-motion을 쓰려면 먼저 ScrollContainer 가 최상단 root가 되어야 하고
그 다음에 ScrollPage 한 화면에 하나씩 page를 넣어준다. 예를들어 4장의 page가 있고 스크롤 애니메이션 효과를 주고 싶다면 ScrollPage page={1}, ScrollPage page={2} 이런식으로 준다. 그 다음 Animator 애니메이션 효과를 어떻게 줄건지 props를 가지고 있다. 그 안에 렌더링할 컴포넌트..

Animator의 props는 여러가지가 있는데,
Fade는 opacity 효과를 가진다.
Move는 어디서부터 어디까지 이동할지를
Sticky는 컴포넌트의 위치를
Zoom 은 얼마나 확대시킬건지를

위에 대략적으로 작성해봤고 다음의 github을 참고하면 된다.

https://github.com/1000ship/react-scroll-motion/blob/master/_readme/docs.md