Slide Transition

Slide pages synchronously to multiple directions.

Page 1

Installation

Install dependencies

npm i framer-motion

Add the following code in App.tsx file


import { BrowserRouter, Route, Routes, useLocation } from "react-router-dom";
import { AnimatePresence } from "framer-motion";

function App() {
  const location = useLocation();
  return (
    <BrowserRouter>
      <AnimatePresence mode="wait" initial={false}>
        <Routes location={location} key={location.pathname}>
          <Route path="/" element={<Home />} />
          // more routes here
        </Routes>
      </AnimatePresence>
    </BrowserRouter>
  );
};

export default App;

Copy the source code

components/PageTransition.tsx 


import { motion } from "framer-motion";

type PageProps = {
  children: React.ReactNode;
};

type TVariants = {
  initial: {
    scale: number;
    x: string;
  };
  animate: {
    scale: number[];
    x: (string | number)[];
  };
  exit: {
    scale: number[];
    x: (string | number)[];
  };
};

// values for right to left transition
const variants: TVariants = {
  initial: {
    scale: 0.75,
    x: "100vw",
  },
  animate: {
    scale: [0.75, 0.75, 0.75, 1],
    x: ["100vw",0, 0],
  },
  exit: {
    scale: [1, 0.75, 0.75, 0.75],
    x: [0, 0, "-100vw"],
  },
};

const PageTransition = ({ children }: PageProps) => {
  return (
    <motion.div
      {...variants}
      transition={{ duration: 0.5 }}
    >
      {children}
    </motion.div>
  );
};

export default PageTransition;

Finally wrap your page with <PageTransition> component

page/Home.tsx 


const Home = () => {
  return (
    <PageTransition>
      <div>Home</div>
    </PageTransition>
  );
};

Replace variants object with one of the examples below according to your need

Left To Right

Page 1

Top To Bottom

Page 1

Bottom To Top

Page 1