Animated sliding page gallery using framer-motion and React.js

Namachila October 13, 2025

0 0 4 minutes read

The following approach covers how to create an animated sliding page gallery using framer-motion and ReactJS.

Prerequisites:

Knowledge of JavaScript (ES6)
Knowledge of HTML and 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 page-gallery

Step 2: After creating your project folder i.e. page-gallery, move to it using the following command.

$ cd page-gallery

Step 3: Add the npm packages you will need during the project.

$ npm install framer-motion @popmotion/popcorn

Open the src folder and delete the following files:

logo.svg
serviceWorker.js
setupTests.js
App.test.js (if any)
index.css.

Create a file named PageSlider.js.

Project structure: The project structure tree should look like this:

Project structure

Filename: App.js

Javascript

import React from "react";
import { useState } from "react";
import { motion, AnimateSharedLayout } from "framer-motion";
import PageSlider from "./PageSlider";
import "./styles.css";
 
const Pagination = ({ currentPage, setPage }) => {
  // Wrap all the pagination Indicators 
  // with AnimateSharedPresence 
  // so we can detect when Indicators 
  // with a layoutId are removed/added
  return (
    <AnimateSharedLayout>
      <div className="Indicators">
        {pages.map((page) => (
          <Indicator
            key={page}
            onClick={() => setPage(page)}
            isSelected={page === currentPage}
          />
        ))}
      </div>
    </AnimateSharedLayout>
  );
};
 
const Indicator = ({ isSelected, onClick }) => {
  return (
    <div className="Indicator-container" onClick={onClick}>
      <div className="Indicator">
        {isSelected && (
          // By setting layoutId, when this component 
          // is removed and a new one is added elsewhere, 
          // the new component will animate out from the old one.
          <motion.div className="Indicator-highlight"
                      layoutId="highlight" />
        )}
      </div>
    </div>
  );
};
 
const pages = [0, 1, 2, 3, 4];
 
const App = () => {
  /* We keep track of the pagination direction as well as 
   * current page, this way we can dynamically generate different 
   * animations depending on the direction of travel */
  const [[currentPage, direction], setCurrentPage] = useState([0, 0]);
 
  function setPage(newPage, newDirection) {
    if (!newDirection) newDirection = newPage - currentPage;
    setCurrentPage([newPage, newDirection]);
  }
 
  return (
    <>
      <PageSlider
        currentPage={currentPage}
        direction={direction}
        setPage={setPage}
      />
      <Pagination currentPage={currentPage}
                  setPage={setPage} />
    </>
  );
};
 
export default App;

Filename: PageSlider.js

Javascript

import React from "react";
import { useRef } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { wrap } from "@popmotion/popcorn";
 
// Variants in framer-motion define visual states
// that a rendered motion component can be in at
// any given time.
 
const xOffset = 100;
const variants = {
  enter: (direction) => ({
    x: direction > 0 ? xOffset : -xOffset,
    opacity: 0
  }),
  active: {
    x: 0,
    opacity: 1,
    transition: { delay: 0.2 }
  },
  exit: (direction) => ({
    x: direction > 0 ? -xOffset : xOffset,
    opacity: 0
  })
};
 
const pages = [0, 1, 2, 3, 4];
 
const PageSlider = ({ currentPage, setPage, direction }) => {
  /* Add and remove pages from the array to checkout 
     how the gestures and pagination animations are 
     fully data and layout-driven. */
  const hasPaginated = useRef(false);
 
  function detectPaginationGesture(e, { offset }) {
    if (hasPaginated.current) return;
    let newPage = currentPage;
    const threshold = xOffset / 2;
 
    if (offset.x < -threshold) {
      // If user is dragging left, go forward a page
      newPage = currentPage + 1;
    } else if (offset.x > threshold) {
      // Else if the user is dragging right, 
      // go backwards a page
      newPage = currentPage - 1;
    }
 
    if (newPage !== currentPage) {
      hasPaginated.current = true;
      // Wrap the page index to within the 
      // permitted page range
      newPage = wrap(0, pages.length, newPage);
      setPage(newPage, offset.x < 0 ? 1 : -1);
    }
  }
 
  return (
    <div className="slider-container">
      <AnimatePresence
        // This will be used for components to resolve
        // exit variants. It's necessary as removed 
        // components won't rerender with 
        // the latest state (as they've been removed)
        custom={direction}>
        <motion.div
          key={currentPage}
          className="slide"
          data-page={currentPage}
          variants={variants}
          initial="enter"
          animate="active"
          exit="exit"
          drag="x"
          onDrag={detectPaginationGesture}
          onDragStart={() => (hasPaginated.current = false)}
          onDragEnd={() => (hasPaginated.current = true)}
          // Snap the component back to the center
          // if it hasn't paginated
          dragConstraints={{ left: 0, right: 0, top: 0, bottom: 0 }}
          // This will be used for components to resolve all 
          // other variants, in this case initial and animate.
          custom={direction}
        />
      </AnimatePresence>
    </div>
  );
};
 
export default PageSlider;

Filename: App.css

CSS

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  overflow: hidden;
  background: #09a960;
}
 
* {
  box-sizing: border-box;
}
 
.App {
  font-family: sans-serif;
  text-align: center;
}
 
.slider-container {
  position: relative;
  width: 600px;
  height: 600px;
}
 
.slide {
  border-radius: 5px;
  background: white;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
 
/* position of indicator container */
.Indicators {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}
 
.Indicator-container {
  padding: 20px;
  cursor: pointer;
}
 
.Indicator {
  width: 10px;
  height: 10px;
  background: #fcfcfc;
  border-radius: 50%;
  position: relative;
}
 
.Indicator-highlight {
  top: -2px;
  left: -2px;
  background: #09f;
  border-radius: 50%;
  width: 14px;
  height: 14px;
  position: absolute;
}

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:

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!