Transistion.reverse() replacement?

[ottotsuma]

Hey all,
I am trying to move to react-spring V9 from V8.

So in Spring V8 I use to do:

bottomTransition.reverse()

To get the animations to play in the reverse order do cards [1 ~ 5] would come out in the order 5, 4, 3, 2, 1. Under react-spring V9 I can no longer just .reverse() the reply because it's now a function call. So [1 ~ 5] becomes 1, 2, 3, 4, 5.

I tried the sort method found: https://react-spring.io/hooks/use-transition#sort

However this just reverses the order of the cards in the deck not the order they come out. So [1 ~ 5] becomes [5 ~ 1] but now they come out 5, 4, 3, 2, 1 instead of 1, 2, 3, 4, 5.

I just want the animation order to be reversed.

  const bottomTransition = useTransition(
    bottomTeamState,
    {
      from: { transform: "translate3d(-700%, 0, 0)" },
      enter: { transform: "translate3d(0%, 0, 0)" },
      leave: { transform: "translate3d(700%, 0, 0)" },
      trail: 175,
      config: {clamp:   true, mass: 3, tension: 150, friction: 38 },
  });

bottomTransition(( style, item, transition, index ) => {

[joshuaellis]

Hi @ottotsuma, if you're able to provide a codesandbox I can take a look for you and offer some advice 👍🏼

[ottotsuma]

Hey Josh,

I made this as fast as I could, I tried to break it down to just the basic parts.

https://codesandbox.io/s/solitary-leaf-ph34h?file=/src/App.js

from,

Otto :)

[ottotsuma]

You can see they come out in order 1 ~5 and 6 ~ 10 but I want them to come out 1 ~ 5 and then 10 ~ 6.
But keeping the order they are in displayed, so the number 10 would animate at the same time as the number 1, and then 2 would match with 9. Etc.

Hope this makes sense. It's hard to discribe,

[ottotsuma]

Mmm, this technically works although I am sure is not the idea of react-spring. I added delays of 175 between each animation and put them into an array. Really just taking it back to V8.

const bottomArray = [
    useTransition(
      bottomTeamState[0],
      {
        from: { transform: "translate3d(-700%, 0, 0)" },
        enter: { transform: "translate3d(0%, 0, 0)" },
        leave: { transform: "translate3d(700%, 0, 0)" },
        trail: 175,
        delay: 175+175+175+175+175,
        // sort: (a, b) => { return -1 },
        // config: config.slow,
        config: { clamp: true, mass: 3, tension: 150, friction: 38 }, // https://react-spring.io/common/configs
      }),
    useTransition(
      bottomTeamState[1],
      {
        from: { transform: "translate3d(-700%, 0, 0)" },
        enter: { transform: "translate3d(0%, 0, 0)" },
        leave: { transform: "translate3d(700%, 0, 0)" },
        trail: 175,
        delay: 175+175+175+175,
        // sort: (a, b) => { return -1 },
        // config: config.slow,
        config: { clamp: true, mass: 3, tension: 150, friction: 38 }, // https://react-spring.io/common/configs
      }),
    useTransition(
      bottomTeamState[2],
      {
        from: { transform: "translate3d(-700%, 0, 0)" },
        enter: { transform: "translate3d(0%, 0, 0)" },
        leave: { transform: "translate3d(700%, 0, 0)" },
        trail: 175,
        delay: 175+175+175,
        // sort: (a, b) => { return -1 },
        // config: config.slow,
        config: { clamp: true, mass: 3, tension: 150, friction: 38 }, // https://react-spring.io/common/configs
      }),
    useTransition(
      bottomTeamState[3],
      {
        from: { transform: "translate3d(-700%, 0, 0)" },
        enter: { transform: "translate3d(0%, 0, 0)" },
        leave: { transform: "translate3d(700%, 0, 0)" },
        trail: 175,
        delay: 175+175,
        // sort: (a, b) => { return -1 },
        // config: config.slow,
        config: { clamp: true, mass: 3, tension: 150, friction: 38 }, // https://react-spring.io/common/configs
      }),
    useTransition(
      bottomTeamState[4],
      {
        from: { transform: "translate3d(-700%, 0, 0)" },
        enter: { transform: "translate3d(0%, 0, 0)" },
        leave: { transform: "translate3d(700%, 0, 0)" },
        trail: 175,
        // sort: (a, b) => { return -1 },
        // config: config.slow,
        config: { clamp: true, mass: 3, tension: 150, friction: 38 }, // https://react-spring.io/common/configs
      }),
  ]

[joshuaellis]

Hm, I wouldn't say this is the correct way to do it either. We have a reverse prop you can use but that seems to only affect the from and to values. It would be strange that in the useTransition hook it reverses the transition array.

I haven't looked enough at the sort prop yet, but this could turn out to be a feature regression and thus an issue.

[ottotsuma]

I had a quick look at sort prop, I did a { return -1} and that reversed the order of the cards shown, not the order of the animations. Sorry my descriptions are a little vague It's my first time trying to describe this.

So [1 ,2 ,3] becomes [3, 2 ,1] but the animation is the same as before the sorting.
As you can see from my attempt I want the animation to be done in reverse.

Maybe my understanding of sort is to shallow here.

[ottotsuma]

This might help narrow it down.

When I changed from using '0' by itself to '%' the animation stopped working entirely.

        from: { transform: "translate3d(-700%, 0%, 0%)" },
        enter: { transform: "translate3d(0%, 0%, 0%)" },
        leave: { transform: "translate3d(700%, 0%, 0%)" },

However in another file the animation ...

    const transitionSpring = useTransition(
        predicionsListState, 
        {
            from: { transform: "translate3d(-700%, 0px, 10px)" },
            enter: { transform: "translate3d(0px, 0px, 0px)" },
            leave: { transform: "translate3d(2000%, 0px, 10px)" },
            trail: 250,
            // config: config.slow,
            config: { clamp: true, mass: 3, tension: 145, friction: 38 }, // https://react-spring.io/common/configs
        })

Required the px added to the end of the '0's to be able to leave.

Don't get me wrong though I love using this package, I really prefer using mass, tension and friction to duration.

[sagarchoudhary96]

@ottotsuma @joshuaellis i tried using older react-spring version(V8.0.27) as well, it works same as current versions.
code sandbox link: https://codesandbox.io/s/confident-hooks-f7yis?file=/src/App.js

[sagarchoudhary96]

@ottotsuma can you share the codesandbox with the older react spring version showing how it should be working.

[Emiliano-Bucci]

@ottotsuma Hi! Did you find any solution to this "issue"? I was trying to accomplish the same thing but without any luck :/ Thanks!