[regression] transition.reverse is currently not possible

[joshuaellis]

Discussed in https://github.com/pmndrs/react-spring/discussions/1758

^{Originally posted by ottotsuma November 17, 2021} 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 ) => {
```</div>

[sagarchoudhary96]

@joshuaellis i would like to work on this one. Would be great to know a little bit more about starting point to look for the fix for this as this is first time i'm working with react-spring.

[sagarchoudhary96]

@joshuaellis how do i make changes locally to this repo and test out in my local project?

[joshuaellis]

Hey @sagarchoudhary96, you'll want to look at the useTransition hook and towards the bottom where we handle the users render function, I haven't given it much thought from that.

Working on the repo, you should fork the repo and work there, there's a demo folder in the repo where you'll see all the sandboxes. You should probably just change an existing useTransition example if possible or create a very simple and functional demo to work with whilst implementing the changes.

Finishing up I don't think we need a dedicated example of the prop, but we should add a test to cover this regression of the public API.

[sagarchoudhary96]

@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

[joshuaellis]

I think you've misunderstood the requirement. If we look at the top section – 1,2,3,4,5 no.1 animates in first on enter and animates out first on leave. However what we want is:

• no.1 animates in first on enter
• no.5 animates out first on leave

So it's not the order of the items being displayed, but the order they're animated.

[sagarchoudhary96]

Thanks, @joshuaellis But I still have concern that, based on the disscusion, as it is mentioned it used to work in older versions using the .reverse() method, it doesn't seem to work in older versions with that. so need to know the older implementation to have the behaviour as we want currently.

This is the behavior being intended for [6~10], the transition happens in reverse order:

[joshuaellis]

If we look at the top section – 1,2,3,4,5 no.1 animates in first on enter and animates out first on leave. However what we want is: no.1 animates in first on enter no.5 animates out first on leave

If it didn't work in the older version as described, then we should introduce it as a feature. I've written above the expected behaviour. I will leave it here for you if you want to take an attempt at introducing the feature, else I will pick it up in due course.

[sagarchoudhary96]

Sure, will try to look into implementing it as a feature as per the requirement :

no.1 animates in first on enter
no.5 animates out first on leave

[anasaijaz]

Hi I am new to open source can you please tell me how can I contribute

[joshuaellis]

Hi I am new to open source can you please tell me how can I contribute

@anasaijaz, the easiest way to contribute would be to look at an open issue we have that you feel like you could tackle, then fork our repo, check out CONTRIBUTING.md and when you're ready with your solution, create a PR and fill out all the details so I can take a look & we can discuss the PR (if required).

We also have a discord (link in the readme) FYI, for typically quicker communication.

[Emiliano-Bucci]

@sagarchoudhary96 Hi! Are there any news on this one?