Framer motion with react route not working properly with slide effect

Question

I am learning react in the past few days. I have beening play around with the slide animation of react routes, and using Framer Motion. However, I have tired many times and could not be able to get it working properly.

For some reason, the slide in animation is not right, the next route just poped out like instantly.

I want to achieve an effect that the new page slides in while the unmounting page sliding out. I could not be able to get the two pages slides at the same time.

I have paste the sandbox of this. https://codesandbox.io/s/react-router-transition-with-framer-motion-s81tc?file=/src/App.js

Any help would be appreciated.

Thanks.

Answer 1

Try adding exitBeforeEnter property for AnimatePresence :

<AnimatePresence exitBeforeEnter initial={false}>
        ...
</AnimatePresence>