Animated sliding page gallery using framer-motion and React.js

The following approach covers how to create an animated sliding page gallery using framer-motion and ReactJS.

Prerequisites:

1. Knowledge of JavaScript (ES6)
2. Knowledge of HTML and CSS.
3. Basic knowledge of ReactJS.

Creating React Application And Installing Module:

Step 1: Create a React application using the following command:

$ npx create-react-app page-gallery

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

$ cd page-gallery

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

$ npm install framer-motion @popmotion/popcorn

Open the src folder and delete the following files:

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

Create a file named PageSlider.js.

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

Filename: App.js

Filename: PageSlider.js

Filename: App.css

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: