Animated expanding card using framer-motion and ReactJS

In this article, we are going to learn how to create an animated expanding card using react and framer.

Prerequisites:

1. Knowledge of JavaScript (ES6). JavaScript inbuilt methods we are going to make use are :
   1. Arrow function (ES6)
   2. Ternary operator
   3. Objects in JavaScript
2. Knowledge of HTML/CSS.
3. Basic knowledge of ReactJS

React hooks used in building this application are:

1. React useState

Framer: components and hooks we are going to make use of in this tutorial are :

1. https://www.framer.com/api/frame/
2. https://www.framer.com/api/scroll/
3. https://www.framer.com/api/utilities/#useanimation

Creating React Application And Installing Module :

Step 1: Now, you will start a new project using create-react-app so open your terminal and type.

$ npx create-react-app animated-card

Step 2: After creating your project folder i.e. animated-card, move to it using the following command.

$ cd animated-card

Step 3: Add the npm packages you will need during the project.

$ npm install framer react-icons
// For yarn
$ yarn add framer react-icons

Open the src folder and delete the following files :

1. logo.svg
2. serviceWorker.js
3. setupTests.js
4. App.css
5. App.js
6. App.test.js (if any)

Create a file named Card.js.

Project structure: Your project structure tree should look like this :

Example: 

Step to Run Application: Run the application using the following command from the root directory of the project.

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output: