Open In App
Related Articles

Animated sliding image gallery using framer and ReactJS

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

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.

Javascript

// 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;

                    

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;
}

                    

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.


Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!


Last Updated : 09 Nov, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads
Complete Tutorials