Newspaper Transition Effect

Newspaper rotation effect

npm i framer-motion

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;

import { motion } from "framer-motion";

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

type TVariants = {
  initial: {
    scale: number;
    rotateZ: number;
    opacity: number;
  };
  animate: {
    scale: number;
    rotateZ: number;
    opacity: number;
  };
  exit: {
    scale: number;
    rotateZ: number;
    opacity: number;
  };
};

const variants: TVariants = {
  initial: {
    scale: 0.2,
    rotateZ: -720,
    opacity: 0.5,
  },
  animate: {
    scale: 0,
    rotateZ: 1,
    opacity: 1,
  },
  exit: {
    scale: 0.2,
    rotateZ: 720,
    opacity: 0.5,
  },
};

const PageTransition = ({ children }: PageProps) => {
    return (
        <motion.div
            {...variants}
            transition={{ duration: 0.5, ease: "easeIn" }}
            style={{ 
                originY: "50vh", 
                originX: "50vw" 
            }}
            >
            {children}
        </motion.div>
    );
};

export default PageTransition;

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