Skip to content
Related Articles

Related Articles

Animated sliding image gallery using framer and ReactJS

Improve Article
Save Article
  • Last Updated : 24 Mar, 2021
Improve Article
Save Article

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


  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


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
      // background color of the page
      background: "#1e1e1e"
      index: 2,
      background: "#fcfcfc"
      index: 3,
      background: "#bcbcbc"
  return (
    // Framer component with some of its attributes
      {/* Map through the Pages object array and 
          rendering each page with its specified 
          image and background-color
      { => (
        // Framer "Frame" component
          <img src={page.src} alt="geeksforgeeks" />
// Export default MyComponent;
// rendering "MyComponent"
const rootElement = document.getElementById("root");
render(<MyComponent />, rootElement);


#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.


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!