Trying to combine Framer Motion and Plasmic

Hello everybody! I hope I can find help here in this channel. I’m trying to combine Plasmic, nextjs and framer-motion with the feature to animate page changes. The problem seems the components of the catch all page ([[…catchAll]].jsx) are not fully removed and like that the component is not triggered. It’s only working when changing between “static” pages I created in pages folder and the catch all page. I’m thankful for all kinds of hints! :slightly_smiling_face:

This is more or less the setup I use: https://wallis.dev/blog/nextjs-page-transitions-with-framer-motion but additionally the use of a catchAll page (https://docs.plasmic.app/learn/nextjs-quickstart/). Are there any events or hooks which allow to interact when there is a new render of the page?

hi @tasty_limpet! one thing I noticed in the github URL is to use:

const url = `<https://wallis.dev>${router.route}

and then to provide theurlas key ofAnimatePresence`.

However, router.route is the same for all catch all pages ("/[[...catchall]]"), so the component doesn’t remount. I believe if you for remounting by using router.asPath as key instead of router.route it should work

Wow Victor you made my day. Magic! Little key and don’t ask how often I looked at it :see_no_evil: super awesome for helping me with this!