React Spring: dynamic values in useTransition() when using it alongside react-router

Question

In this example you can see some nice transition between pages triggered by the route change. (took from LevelUp Tutorials' React Animation course, thanks a lot Scott Tolinski).

Now I'd like to make these transitions happen in both directions, depending on which page it's transitioning to (and from), for instance:

• Page One -> Page Two (both pages transition from left to right)
• Page Three -> Page One (both pages transition from right to left)
• etc

From that first example I created this example where the value of x is dynamic and should be evaluated to either 100 or -100, based on the direction of the transition.

I haven't fundamentally understood how useTransition() works, and the documentation is rather limited. The examples look amazing but are quite hard to understand.

This example seems to do a similar thing to what I'm trying to achieve but the code feels like black magic: the y property of each object returned from rows.map() appears to be related to the y value on the functions assigned to enter and update properties because if I remove that I get the error: Cannot read property 'replace' of undefined. How does that work?

Answer 1

This problem has two part.

• determining the direction

• change the animation

I created an example for solving the second part. When the user click page one I reverse the animation.

const reverse = location.pathname === '/';
const transitions = useTransition(location, location => location.key, {
  from: { opacity: 0, transform: `translate3d(${reverse ? '-100%' : '100%'},0,0)` },
  enter: { opacity: 1, transform: "translate3d(0,0,0)" },
  leave: { opacity: 0, transform: `translate3d(${reverse ? '100%' : '-100%'},0,0)` },
  // "initial: null" should only disable the 'from' initial transition, not the subsequent 'leave' transition (on the first manually triggered transition)
  initial: null
});

Here is the sandbox: https://codesandbox.io/s/spring-transition-with-routes-215t8

For the first part to determine when to reverse the animation, I would store the path at each click and compare the next one to the previous. There is an example of storing the path here: Check history previous location before goBack() react router v4

I hope it helps.