Animated sliding image gallery using framer and ReactJS
Last Updated :
25 Jul, 2024
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:
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.
CSS
/* Filename - App.css*/
#root {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: rgba(0, 85, 255, 1);
perspective: 1000px;
cursor: ew-resize;
}
body {
font-family: sans-serif;
text-align: center;
margin: 0;
}
img {
border-radius: 100%;
height: 300px;
width: 300px;
margin-top: 25px;
justify-content: center;
align-items: center;
}
// Filename - App.js
import React from "react";
// Importing framer components : Frame and Page
import { Frame, Page } from "framer";
import "./index.css";
export function App() {
// Object array of sliding gallery pages data
const pages = [
{
index: 1,
// Source of the image
src:
"https://media.geeksforgeeks.org/wp-content/" +
"cdn-uploads/gfg_200x200-min.png",
// background color of the page
background: "#1e1e1e",
},
{
index: 2,
src:
"https://media.geeksforgeeks.org/wp-content/" +
"cdn-uploads/20190710102234/download3.png",
background: "#fcfcfc",
},
{
index: 3,
src:
"https://yt3.ggpht.com/ytc/AAUvwnjJqZG9PvGfC3Go" +
"V27UlohMeBLxyUdhs9hUbc-Agw=s900-c-k-c0x00ffffff-no-rj",
background: "#bcbcbc",
},
];
return (
// Framer component with some of its attributes
<Page
defaultEffect="none"
width={350}
height={350}
contentWidth="auto"
alignment="end"
radius={30}
>
{/* Map through the Pages object array and
rendering each page with its specified
image and background-color
*/}
{pages.map((page) => (
// Framer "Frame" component
<Frame
width={350}
height={350}
radius={30}
background={page.background}
>
<img
src={page.src}
alt="geeksforgeeks"
/>
</Frame>
))}
</Page>
);
}
export default App;
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.