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
