Animated sliding image gallery using framer and ReactJS

24 Mar, 2021
The following approach covers how to create an animated sliding image gallery using framer and ReactJS.
Prerequisites:
Knowledge of JavaScript (ES6)Knowledge of HTML/CSS.Basic knowledge of ReactJS.
Knowledge of JavaScript (ES6)
Knowledge of HTML/CSS.
Basic knowledge of ReactJS.
Creating React Application And Installing Module:
Step 1: Create a React application using the following command:$ npx create-react-app image-gallery
Step 1: Create a React application using the following command:
$ npx create-react-app image-gallery
Step 2: After creating your project folder i.e. image-gallery, move to it using the following command.$ cd image-gallery
Step 2: After creating your project folder i.e. image-gallery, move to it using the following command.
$ cd image-gallery
Step 3: Add the npm packages you will need during the project.$ npm install framer
Step 3: Add the npm packages you will need during the project.
$ npm install framer
Open the src folder and delete the following files:
logo.svgserviceWorker.jssetupTests.jsApp.test.js (if any)App.jsApp.css
logo.svg
serviceWorker.js
setupTests.js
App.test.js (if any)
App.js
App.css
Project Structure: It will look like the following.
Project structure
index.js
import React from "react";import { render } from "react-dom";  // Importing framer components : Frame and Pageimport { Frame, Page } from "framer";import "./index.css";  export function MyComponent() {  // 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 MyComponent;// rendering "MyComponent"const rootElement = document.getElementById("root");render(<MyComponent />, rootElement);
index.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.
Reference: https://codesandbox.io/s/animated-sliding-image-gallery-9pplj
Framer-motion
React-Questions
CSS
JavaScript
ReactJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to set space between the flexbox ?
Design a Tribute Page using HTML & CSS
Build a Survey Form using HTML and CSS
Form validation using jQuery
Design a web page using HTML and CSS
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array
Hide or show elements in HTML using display property
Roadmap to Learn JavaScript For Beginners