Skip to content
Related Articles

Related Articles

Improve Article

Animated sliding image gallery using framer and ReactJS

  • Last Updated : 24 Mar, 2021

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

Prerequisites:

  1. Knowledge of JavaScript (ES6)
  2. Knowledge of HTML/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 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

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. App.js
  6. 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 Page
import { 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:
        "cdn-uploads/gfg_200x200-min.png",
      // background color of the page
      background: "#1e1e1e"
    },
    {
      index: 2,
      src:
        "cdn-uploads/20190710102234/download3.png",
      background: "#fcfcfc"
    },
    {
      index: 3,
      src:
        "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




My Personal Notes arrow_drop_up
Recommended Articles
Page :