[v6] [Feature]: Guidance on animating out routes

[jamesplease]

What is the new or updated feature that you are suggesting?

Hey React Router team,

Thanks so much for your work on v6. It's clear a lot of effort went into it, and I think it turned out great.

I'm writing this issue because one of the things that I commonly need to do is animate out an element when the path no longer matches. I found it relatively straightforward to accomplish this in v5, as the Routes themselves are components that render their children. The v5 docs also included an example showing animated routes that was a useful foundation to build from.

In v6, though, it's not clear to me yet what the simplest way to accomplish exit animations is when using the <Routes/>/<Route>/useRoutes APIs.

I was able to animate out in v6 when using the useMatch() API directly, but it seems that this approach is effectively going back to v5 patterns. This approach means that you lose out on all of the new features like outlets, and you also have to go without any the other useful v5 features such as Switch. Because of this, for an app with a lot of location-based exit animations it seems like it might actually be better to stay on v5 if useMatch is currently the best way to do animated exit transitions in v6.

If y'all have any recommendations on the best way to do exit animations with routes in v6, I think that could make for a pretty useful guide in the docs.

Also, although I'm definitely still learning the ropes of v6, I am beginning to wonder if new or updated APIs might make it easier to integrate Routes/Route/useRoutes with popular animation libs. I've been poking around the source and my initial thoughts were that something around _renderMatches could make it easier to integrate this lib with, say, Framer Motion's AnimatePresence. I'm still investigating this idea and I might jot down more ideas here if anything more specific comes to mind.

It's also entirely possible that there's a super obvious way to do this with Routes/Route/useRoutes. I am definitely a beginner at v6 so do chime in if there's something simple that I've overlooked.

To summarize this issue:

• A guide in the docs for animations could be useful, or an analogous example to the v5 one. I'd be happy to open a PR for this if someone could bullet point the recommended approach.
• It may also be necessary to add new functionality to the API to improve exit animations when using the Routes/Route/useRoutes API, but I am not certain of this

Thanks for reading!

Why should this feature be included?

Animating out routes is a common requirement, so there should be a good story for it, I think.

[tretyakvl]

Here's one way to do this with Framer's AnimatePresence.

[WeiShengv99]

what about this case?

const Page = () => {
  const location = useLocation();
  console.log(location) //when change the route, you can see location console looks strange.
  return (
    <motion.h1
      variants={variants}
      initial="shown"
      animate="shown"
      exit="hidden"
      transition={{ duration: 3 }}
    >
      Some Page
    </motion.h1>
  );
};

[tcandens]

I did not have any luck using framer-motion and am already extensively using ole-fashioned react-transition-group. Here is an approach I've come up with that has a minimal re-implementation of presence.

// main.jsx
import './main.css'
import React from 'react
import { useLocation, useOutlet } from 'react-router-dom'
import { CSSTransition } from 'react-transition-group

const TRANSITION_DURATION_MS = 400

export const Layout = () => {
  const location = useLocation()
  let outlet = useOutlet()
  const [currentOutlet, setCurrentOutlet] = React.useState(outlet)
  const [isRouting, setIsRouting] = React.useState(false)
  
  // We need to delay the unmounting of our outlet to allow for exit transition animation
  React.useEffect(() => {
    setIsRouting(false)
    let timeout = setTimeout(() => {
      setCurrentOutlet(outlet)
      setIsRouting(true)
      clearTimeout(timeout)
    }, TRANSITION_DURATION_MS)
    return () => clearTimeout(timeout)
  }, [location.pathname])
  
  return (
    <div style={{ '--route-transition-duration: `${TRANSITION_DURATION_MS}ms` }}>
      <CSSTransition
        key={location.key}
        in={isRouting}
        timeout={TRANSITION_DURATION_MS}
        classNames="route"
        unmountOnExit
      >
        {currentOutlet}
      </CSSTransition>
    </div>
  )
}

// main.css
.route-enter {
  opacity: 0;
  transform: translate3d(-50%, 0, 0) scale(0.80);
}
.route-exit {
  opacity: 1;
  transform: translate3d(0%, 0, 0) scale(1.00);
}
.route-enter-active {
  opacity: 1;
  transform: translate3d(0%, 0, 0) scale(1.00);
}
.route-exit-active {
  opacity: 0;
  transform: translate3d(50%, 0, 0) scale(1.10);
}
.route-enter-active,
.route-exit-active {
  transition-duration: var(--route-transition-duration, 400ms);
  transition-property: all;
  transition-timing-function: ease-in-out;
}

[ergofriend]

You can also refer this
#8008 (comment)