Steps to create React Application And Installing Module
Step 1: Create a React application using the following command:
npx create-react-application demo
Step 2: After creating your project folder i.e. demo, move to it using the following command:
cd demo
Step 3: Install framer-motion from npm.
npm i framer
Project Structure:
The updated list of dependencies after installing required modules:
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"framer": "^1.3.6",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}
Example: This example implemets sliding image gallery using Page and Frame components of framer.
Javascript
// Filename - App.js import React from "react" ; // Importing framer components : Frame and Page import { Frame, Page } from "framer" ; import "./index.css" ; export function App() { // Object array of sliding gallery pages data const pages = [ { index: 1, // Source of the image src: "https://media.w3wiki.org/wp-content/" + "cdn-uploads/gfg_200x200-min.png" , // background color of the page background: "#1e1e1e" , }, { index: 2, src: "https://media.w3wiki.org/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= "w3wiki" /> </Frame> ))} </Page> ); } export default App; |
CSS
/* Filename - App.css*/ #root { width : 100 vw; height : 100 vh; 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.
Animated sliding image gallery using framer and ReactJS
Animated sliding image gallery using Framer and React JS will have some image and show one by one by one with a sliding animation from right to left.