How can I use react-spring useTransition to go from left to right or viceversa

Question

I have a Switch and a Router, and whenever the route changes, it goes from left to right, I would like to know if there's a simple way that the animation can go from right to left based on the change of the route. Thanks in advance.

https://codesandbox.io/s/page-transition-with-react-router-and-react-spring-b07jp

I found this example online and I would like to know how can it go from right to left when you click profile.

Answer 1

The position is controlled by the transform: 'translate(__)' in lines 46-49 of that code. You can read more about CSS transforms and the translate function on MDN.

All that you need to do to reverse the direction is to reverse the signs of the two percentages.

Change translate(100%,0) to translate(-100%,0) in the from style.

Change translate(-50%,0) to translate(50%,0) in the leave style.

Answer 2

The solution has two part, You want to determine when do you want to reverse the motion. In this case you want to reverse it when you are on the profile page. location.pathname === "/profile-page" Then you have to switch the direction based on this information. This was described in the other answer. The whole example can be something like this:

  const { location } = useContext(__RouterContext);
  const reverse = location.pathname === "/profile-page";
  const transitions = useTransition(location, (location) => location.pathname, {
    from: {
      position: "absolute",
      width: "100%",
      opacity: 0,
      transform: reverse ? "translate(-100%,0)" : "translate(100%,0)"
    },
    enter: { opacity: 1, transform: "translate(0%,0)" },
    leave: {
      opacity: 0,
      transform: reverse ? "translate(50%,0)" : "translate(-50%,0)"
    }
  });