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:         "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="neveropen" />         </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
