0

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.

Kongeek
  • 25
  • 7

1 Answers1

1

Try adding exitBeforeEnter property for AnimatePresence:

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

Edit React router transition with Framer Motion

Dennis Vash
  • 50,196
  • 9
  • 100
  • 118
  • Thank, The `exitBeforeEnter` allows the entering page wait until the unmounting page totally disapprears. How can we achive the effect that the new page slides in while the unmounted page sliding out like a swiper? – Kongeek Jun 13 '20 at 09:38
  • active the animation in the same time – Dennis Vash Jun 13 '20 at 09:39
  • Is that means `exitBeforeEnter` is not suit for this senario? If I remove `exitBeforeEnter`, the new page starts to flash in again while the unmounting page slide out as expected. – Kongeek Jun 13 '20 at 09:42
  • You have an official example: https://codesandbox.io/s/framer-motion-image-gallery-pqvx3?fontsize=14&module=%2Fsrc%2FExample.tsx – Dennis Vash Jun 13 '20 at 09:44
  • @DennisVash Can you please take a look at the following question:https://stackoverflow.com/questions/66356418/exit-animation-for-children-items-not-working-in-framer-motion – HKS Feb 24 '21 at 18:09