react router, listen to push requests - next.js

Question

I am working on a webs site which uses framer motion and next.js, the problem is that I need to remove a class that allow animations to happen before the path changes.
At first i tried
import {useRouter} from 'next/router'
export default function Projects(){
const [animated,setAnimated] = useState(true)
const {asPath} = useRouter()
useEffect(() => {
if(asPath!== '/projects'){
setAnimated(false)
}else{
setAnimated(true)
}
},[asPath])
return(
<div className={styles.activeLayer}>
<Image layout="fill" height='100%'src={allProjects[currentDisplay].backgroundImg} alt=""/>
<div className={`${styles.descriptionBox} + ${(**animated** ? styles.animatedOne:'')}`}>
<h2>
SomeTitle
</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Modi excepturi esse ex odit saepe ipsam facere beatae similique doloremque quo quidem tempore quas molestias, commodi corporis natus possimus atque voluptatem?</p>
<div className={`${styles.iconComponent} + ${(animated ? styles.animatedFive:'')}`}>
<Tool imgArray={allProjects[currentDisplay].tools} />
</div>
this doesn't work cause animations run for a millisecond before it changes, and it actually needs to listen to the push request from a <Link>, but I don't know how to do it.
,

Answer 1

You can swap it. Set the state to default as false.
import {useRouter} from 'next/router'
const [animated,setAnimated] = useState(false)
const {asPath} = useRouter()
useEffect(() => {
if(asPath !== '/projects'){
setAnimated(false)
}else{
setAnimated(true)
}
},[asPath])

Answer 2

Instead of messing with some possibly incorrect initial state and using the useEffect hook to update it after the initial render, just set the correct initial state.
Example:
import { useRouter } from 'next/router';
export default function Projects() {
const {asPath} = useRouter();
const animated = asPath === '/projects';
return (
<div className={styles.activeLayer}>
<Image
layout="fill"
height='100%'
src={allProjects[currentDisplay].backgroundImg}
alt=""
/>
<div
className={`${styles.descriptionBox} + ${animated
? styles.animatedOne : ''}`
}
>
<h2>SomeTitle</h2>
<p>....</p>
<div
className={`${styles.iconComponent} + ${animated
? styles.animatedFive : ''}`
}
>
<Tool imgArray={allProjects[currentDisplay].tools} />
</div>
</div>
</div>
);
}
animated is what could be considered derived state and it's often considered a React anti-pattern to store derived state in React state. Just use the asPath === '/projects' value directly.
Example:
import { useRouter } from 'next/router';
export default function Projects() {
const {asPath} = useRouter();
return (
<div className={styles.activeLayer}>
<Image
layout="fill"
height='100%'
src={allProjects[currentDisplay].backgroundImg}
alt=""
/>
<div
className={`${styles.descriptionBox} + ${animated
? styles.animatedOne : ''}`
}
>
<h2>SomeTitle</h2>
<p>.....</p>
<div
className={`${styles.iconComponent} + ${animated
? styles.animatedFive : ''}`
}
>
<Tool imgArray={allProjects[currentDisplay].tools} />
</div>
</div>
</div>
);
}