Animated sliding image gallery using framer and ReactJS

Namachila October 13, 2025

0 2 2 minutes read

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.

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:

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 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: 
        "https://media.zambiatek.com/wp-content/" +  
        "cdn-uploads/gfg_200x200-min.png", 
      // background color of the page 
      background: "#1e1e1e"
    }, 
    { 
      index: 2, 
      src: 
        "https://media.zambiatek.com/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="zambiatek" /> 
        </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

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek 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!