/PageTransitions_Framer_Motion

NextJs 14 Framer Motion Page Transitions

Primary LanguageTypeScript

Page Transitions Framer motion

image

Make your children_Pages inside AnimatePresence

import { AnimatePresence } from "framer-motion";
// layout.tsx 
<body className={inter.className}>

        <AnimatePresence>
            {children}
        </AnimatePresence>
        
      </body>
import { motion } from "framer-motion";
<motion.div
      initial={{ width: 0 }}
      animate={{ width: "100%" }}
      exit={{ x: window.innerWidth, transition: { duration: 0.01 } }}
>
      <NavBar />
      <Aside image={Banner} />
</motion.div>

Other Opacity

<motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 , transition: { duration: 0.1 }  }}
    >
      {/* ... */}
</motion.dev>