Framer motion 순한맛 찍먹

Intro 🍠🍞🥕

애니메이션이 서비스를 더 재미있게 만들어주고, 더 사용하고 싶어지게 만들어준다고 생각되는 요즘, 스터디를 통해 framer-motion을 학습해보게 되었다.

Framer는 interactive 디자인을 도와주는 툴인데, 그중에서 Motion은 리액트를 위한 production-ready(실제 제품 단계의) motion library를 표방하며, 오픈 소스로 공개되어 있다. 특징으로 내세우는 것 중 하나는 effortless layout transitions and gestures, 즉 transition과 gesture를 고려할 때 노력이 필요없다..!는 점이다.

 

사실 나는 여기까지 정리하고서도 이해가 어려웠기에 공식문서의 예제를 사용해 사용 전/후 비교용 switch 컴포넌트를 만들어 보았다.

• motion.div를 사용한 경우, knob(흰색 동그라미)이 flex-start와 flex-end로 변화할 때(즉, 리렌더링이 발생할 때) 애니메이션이 나타나 자연스럽게 이동하는 것처럼 보인다.
• 사용하지 않은 경우, knob은 텔레포트하는 것처럼 뚝뚝 끊기는 느낌이 든다.

 

yarn add framer-motion

 

React 16.8 이상으로 CRA 후 framer-motion 라이브러리를 설치한다. 어찌보면 parameter를 적재적소에 넣는게 핵심이다보니 직접 여러가지를 사용해보면서 익혀가는게 좋을 것 같았다. 문서를 참고하여 간단한걸 직접 만들어보는 시간을 가졌다.

 

 

 

 

Gesture: whileHover

 

 

 

사용자가 뭔가 행위(gesture)를 했을 때, 그중에서도 hover중일 때 y 방향으로 -5만큼 올라가는 카드 컴포넌트다. 웹에서 hover임을 표시할 때에는 항상 색상을 바꾸는 방식을 사용했는데 마우스를 올렸을 때 무엇이 선택되어 있는지 조금 더 역동적으로 보여준다는 느낌이 들었다.

<motion.div whileHover={{ y: -5 }}>
UP!
</motion.div>

 

 

 

Transition

 

 

 

Transition을 사용하여 모바일처럼 새로운 페이지가 뜰 때 옆에서 스르륵 튀어나오도록 만들어보았다.

하지만 사실 이건.. AnimationPresence와 react-router-dom을 사용해서 page navigation 시 default로 구성되도록 할 수도 있다. 이 글을 참고하자!

 

 

 

 

Transition + Animate

 

 

 

Animate와 Transition을 함께 사용하여 하트가 펌핑하는 듯한 애니메이션을 만들었다. keyframe대신 아래와 같이 간단하게 표현할 수 있었다.

animate={{
    scale: [1, 2, 1],
    opacity: [0.8, 0.4, 0.8]
}}

 

 

 

마무리

· framer-motion은 지금도 조금씩 사용해보고 있다. 연습을 거쳐 다음엔 매운맛🧅🌶🧄 찍먹 편으로 돌아오려 한다.

· 올릴만한 예제를 직접 만들려고 하다보니 글쓰기보다 예제 만들어보는데 시간이 더 걸린 것 같지만.. 단순히 예제와 기능의 나열이 아닌 내가 전달하고 싶은 것을 이해하고, 직접 구성하여 보여주는 것이 의미있었다.