export default function MyApp({ Component, pageProps, router }){
const [ isLoading, setIsLoading ] = useState(true)
useEffect(() => {
if(isLoading === true) {
document.querySelector("body").classList.add("no-scroll")
} else {
document.querySelector("body").classList.remove("no-scroll")
}
}, [isLoading])
return (
<main className={`${new_york.variable} ${montserrat.variable} ${aldo_apache.variable}`}>
<Layout story={pageProps.config}>
<AnimatePresence mode="wait" initial={false} onExitComplete={() => window.scrollTo(0, 0)}>
{isLoading ? ( <Loader setIsLoading={setIsLoading} /> ) : ( <Component {...pageProps} key={router.route} /> )}
</AnimatePresence>
</Layout>
</main>
)
}
I have a problem with the Framer Motion exit. Before I inserted an AnimatePresence at the exit of a text at the change of useState, the exit at the change of ruoter worked very well. Then since I added the change of state, the exit on change of ruoter no longer works for me but only works on change of state.
Would anyone be able to help me?
Above you see the _app.js that was working very well, below I put a component with the state change
export default function Projects({ blok }) {
const [ isProjectOpen, setIsProjectOpen ] = useState(undefined)
return (
<section className={styles.projects_container}>
<PreviewTitle blok={blok} isProjectOpen={isProjectOpen} setIsProjectOpen={setIsProjectOpen} />
<PreviewImage blok={blok} isProjectOpen={isProjectOpen} setIsProjectOpen={setIsProjectOpen} />
<AnimatePresence>{isProjectOpen === !undefined && ( <MainProject blok={blok} setIsProjectOpen={setIsProjectOpen} /> )}</AnimatePresence>
</section>
)
}
export default function PreviewTitle({ blok, isProjectOpen, setIsProjectOpen }) {
return (
<AnimatePresence>
{isProjectOpen === undefined && (
<div className={styles.preview_container}>
{blok.projects.map((project, i) => {
return (
<div key={i} className={styles.title_container}>
<motion.h1
onClick={() => setIsProjectOpen(i)}
initial={{ y: 200 }}
animate={{
y: 0,
transition: {
duration: 1,
delay: .02 * i,
ease: [0.83, 0, 0.13, 1]
}
}}
exit={{
y: 200,
transition: {
duration: .9,
delay: .02 * i,
ease: [0.83, 0, 0.13, 1]
}
}}
>
{project.title}
</motion.h1>
</div>
)
})}
</div>
)}
</AnimatePresence>
)
}
Thanks for the help
I expect the exit animation when changing ruoter and also when changing state