How to Use Framer Motion with React

Steven Creates
6 min readMar 15, 2021

This series guide + article will be going through examples and concepts of Framer Motion used within React and React Hooks coupled with Styled Components.

React + Framer Logo by Steven Creates

Index:

  • Follow Along
  • Overview
  • Animations
  • Transitions
  • Gestures
  • Code Example
  • Copy My Code

Before we start, I wanted to say thank you for taking the time to read my guide + article. I spend a lot of time and effort on these articles and I enjoy providing easy and helpful examples to the community. If you end up loving my article please give it a clap. Or if there is something you would like me to add please comment. I can’t get better without your feedback. Thanks again!

Follow Along

We are going to over several examples of usage of using Framer Motion in React. Using only react functional components and react hooks. We will also be utilizing styled components for styling.

— Part 2 will be coming soon follow to get notified —

Thank you for reading, feel free to clap and provide any feedback you have.

Overview

--

--

Steven Creates

Software Engineer with 7+ years of hands-on experience designing, developing, and implementing. Focusing on React + Animations + TypeScript + Storybookjs