Framer motion's full page transitions breaks with remix while using loader in route file

What version of Remix are you using?

1.6.3

Steps to Reproduce

1. Make simple remix app with framer-motion
2. Set up page transtions in root
3. make route that uses loader data,

Expected Behavior

I expected animation to be compled (exiting from page with loader data).

Actual Behavior

While exiting from page with loader data, it gives an error TypeError: Cannot destructure property 'data' of 'useLoaderData(...)' as it is undefined.. I noticed that loader data delets first off, not allowing animation to complete, so error shows.

All other routes with no loader works completly fine! made clean and simple new remix app with framer motion to show

[jamesilva]

Yeah, that’s not gonna work, as react will remove it from the tree and framer will just animate the new outlet. For a simple case like this one you could work around it the way you first did it, keeping exit animations, but that loses the message when exiting the route. To also keep the loader message when the loader is exiting, you could use useRef.

// loader/index.tsx

function Index() {
  const lastMessage = React.useRef({});
  const data = useLoaderData() || lastMessage.current;

  React.useEffect(() => {
    if (data) lastMessage.current = data;
  }, [data]);

  return (
    <motion.div
      style={{ textAlign: 'center', padding: 20 }}
      initial={{ opacity: 0, x: 30 }}
      animate={{ opacity: 1, x: 0 }}
      exit={{ opacity: 0, x: -30 }}
      transition={{ duration: 0.4, type: 'tween' }}
    >
      <div
        style={{
          width: '200px',
          height: '100px',
          backgroundColor: '#60c442',
          margin: 'auto',
        }}
      />
      <h1>Hello second route!</h1>
      <p>Message from loader:</p>
      <p>{data.message}</p>

      <Link to='/'>Go back</Link>
    </motion.div>
  );
}

Another “workaround” is to load the message in the root loader, since that routeData is always available, and then use useMatches() inside the index route.

The best thing it seems would be to prevent the route transition before framer motion finishes animating, but I haven’t figured out yet if that is available to us.

[ImExoOdeex]

I made one with loader bug. U can try yourself - change <AnimatePresence exitBeforeEnter> <motion.main key={location.key}> {outlet} </motion.main> </AnimatePresence> to <AnimatePresence exitBeforeEnter> {outlet} </AnimatePresence> to remove animations and It’ll work fine