In this tutorial, we’ll learn how to animate React applications with Framer motion by building a contact cards application.

Here are the relevant links:

• Framer motion documentation: https://www.framer.com/motion/

• Live app: https://react-contact-cards.netlify.app/

• Starter repo: https://github.com/ebenezerdon/react-contact-cards/tree/framer-tutorial-starter

• Complete project repo: https://github.com/ebenezerdon/react-contact-cards

• React/Tailwind course: https://youtu.be/3g42k_JVqI4

• 00:00:00 - Introduction

• 00:02:42 - An overview of our React codebase

• 00:04:30 - Setting up Framer in our React app

• 06:11:44 - Animating our contact cards display

• 00:16:57 - Animating our modal

• 00:22:39 - Wrapping up

#react #framer