Next.js Discord

Discord Forum

Page transition exit animation not working in nextjs app route (Framer motion)

Unanswered
Orinoco Crocodile posted this in #help-forum
Open in Discord
Orinoco CrocodileOP
any idea how to make page transition exit animation work in nextjs app router?
im using mode="wait" and key path name but it's still not working

10 Replies

the page transitions from nextjs are instant. The only way you can do this is by not navigating directly and execute the exit animation manually. You can do that by using the animation controller from framer motion (https://www.framer.com/motion/use-animation-controls/). Example:
    const onDismiss = useCallback(async () => {
        await controls.start("closed");
        router.back()
    }, [router])


I used this code in a modal. I first want to close the modal and then navigate the route.
@Orinoco Crocodile hmm any example code?
Yea. My message includes an example lol
@B33fb0n3 Yea. My message includes an example lol
Orinoco CrocodileOP
no i mean
real implement page transition like stackblitz 🥹
Give me like 1 hour and I send it ^^
@Orinoco Crocodile no i mean real implement page transition like stackblitz 🥹
I don't know how to upload it to stackblitz, but you can see the code here:
https://github.com/B33fb0n3/transition
I will delete the repo later, so you may want to copy some things in your code until it's working
In my case I used an modal as page transition (you can see in the url that the page change) and the animation is only in the loading state
Ah nice. Keep me up to date 😄