Galería de imágenes deslizantes animadas usando framer y ReactJS

El siguiente enfoque cubre cómo crear una galería de imágenes deslizantes animadas utilizando Framer y ReactJS.

requisitos previos:

1. Conocimiento de JavaScript (ES6)
2. Conocimientos de HTML/CSS.
3. Conocimientos básicos de ReactJS.

Creación de la aplicación React e instalación del módulo:

• Paso 1: Cree una aplicación React usando el siguiente comando:

  $npx create-react-app image-gallery

• Paso 2: después de crear la carpeta de su proyecto, es decir , la galería de imágenes , acceda a ella con el siguiente comando.

  $cd image-gallery

• Paso 3: agregue los paquetes npm que necesitará durante el proyecto.

  $npm install framer

Abra la carpeta src y elimine los siguientes archivos:

1. logotipo.svg
2. serviceWorker.js
3. setupTests.js
4. App.test.js (si corresponde)
5. Aplicación.js
6. aplicación.css

Estructura del proyecto: Tendrá el siguiente aspecto.

Estructura del proyecto

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

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

$ npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida.

Referencia: https://codesandbox.io/s/animated-sliding-image-gallery-9pplj