Animated sliding image gallery using framer and ReactJS

Animated sliding image gallery using Framer and React JS will have some image and show one by one by one with a sliding animation from right to left.

Prerequisites:

• Node.js and NPM
• React JS
• React JS Hooks

Approach:

To design an animated sliding image gallery using Framer in React we will be using the Page and Frame components for showing transitions. The images will be enclosed in the frame component and switched to another image with sliding animation.

Steps to create React Application And Installing Module :

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

npx create-react-application demo

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

cd demo

Step 3: Install framer-motion from npm.

npm i framer

Project Structure:

The updated list of dependencies after installing required modules:

"dependencies": {
 "@testing-library/jest-dom": "^5.17.0",
 "@testing-library/react": "^13.4.0",
 "@testing-library/user-event": "^13.5.0",
 "framer": "^1.3.6",
 "react": "^18.2.0",
 "react-dom": "^18.2.0",
 "react-scripts": "5.0.1",
 "web-vitals": "^2.1.4"
}

Example: This example implemets sliding image gallery using Page and Frame components of framer.

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.