What is the best way to animate parallel and intercept routes in Next.js?

[tomo-ki]

Summary

Hi, I am using parallel routes/intercepting routes in my Next.js development to implement a modal. Furthermore, I would like to use headlessui's Transition to perform animations when visiting and leaving a page.

We are currently working on a combined implementation of parallel routes/intercepting routes and Transition, but we feel that few people use such a combination. parallel routes/intercepting routes to be animated, can you advise on the best way to implement this? It would be helpful if you could also provide specific implementation examples and resource references.

Additional information

No response

Example

No response

[jimapl]

I'm wrapping my modal component in a animate.div and AnimatePresence from framer motion.
I have isVisible var that checks if the current path is equal to x. This way it gets unmounted properly when "closing" the modal or navigating back to the parent route.
As of now I've noticed that nextjs does not properly unmount the @parallel route when navigating away. This is my current way of doing this and I believe the only way to do this.

Also have not had a good experience with RSC's in parallel, at least for a modal. making the route client side is the solution here