Framer-motion을 활용하여 웹 사이트에 생명을 불어넣어 봅시다!

Framer Motion

Framer는 스케치, 피그마와 같이 디자이너 또는 개발자가 웹, 앱 등을 디자인하고 프로토타이핑을 할 수 있게 해주는 디자인 툴입니다. Framer-motion은 Framer사에서 개발한 리액트 애니메이션 전용 오픈소스 라이브러리입니다.

왜 Framer-motion을 배우나요?

Framer-motion은 리액트를 위해 만들어진 라이브러리라는 사실 뿐만 아니라 아래와 같은 여러 애니메이션 관련기능을 전부 제공한다는 사실 때문에 많은 프론트엔드 개발자들에게 사랑받고 있습니다. 웹 사이트에 조금 더 정교한 애니메이션과 다채로운 인터랙션을 넣고싶다면 Framer-motion을 배워두는것이 매우 유용할 것입니다.

• 다양한 애니메이션
• 단순한 키프레임 문법 제공
• 제스쳐 (drag/tap/hover)
• 레이아웃 애니메이션
• SVG paths
• Exit 애니메이션
• 서버사이드 렌더링
• 컴포넌트 간의 애니메이션 오케스트레이팅
• CSS 변수
• ...그외 훨씬 더 많은 것들

들어가며..

이번 시리즈에서는 Framer-motion의 공식문서를 기반으로 공부한 내용을 포스팅하겠습니다. 공부를 해나가면서 발견한 유용한 블로그 글이나 강의들도 함께 첨부하며 공부해 보겠습니다.