react - 페이지 전환 애니메이션

1. framer-motion 설치

 

npm i framer-motion

 

 

2. App.js를 AnimatePresence 으로 감싸기

 

function App() {
  return (
    <div className="App">
      <AnimatePresence>
        <Routes>
          <Route path='/' element={<Home/>} />
        </Routes>
      </AnimatePresence>
    </div>
  );
}

 

 

3. 컴포넌트 생성

inital : 시작 / animate : 등작 / exit : 끝

 

import React from 'react'
import { motion } from 'framer-motion';

const PageAnimation = ({ children }) => {
  return (
    <motion.div
      initial={{opacity: 0}}
      animate={{opacity: 1}}
      exit={{opacity: 0}}
      transition={{ duration: 0.5 }}
    >
      {children}
    </motion.div>
  )
}

export default PageAnimation