React-spring: useTrail wont re animate if count of items stays the same.

[RayLuxembourg]

🐛 Bug Report

(A clear and concise description of what the bug is.)

To Reproduce

Try to animate your list while keeping the length of the list same
Steps to reproduce the behavior:

Expected behavior

Should animate even if count stays the same.

Link to repro (highly encouraged)

https://codesandbox.io/s/sweet-hooks-xgpse?fontsize=14

Environment

• react-spring v8.x.x
• react v16.8.x (or react-native v0.58.x)

[aleclarson]

Please provide a minimal CodeSandbox or git url that shows the issue. 👍

[RayLuxembourg]

@aleclarson
https://codesandbox.io/s/sweet-hooks-xgpse?fontsize=14

[aleclarson]

Your sandbox is the default template. Did you not save it after adding the useTrail call?

[RayLuxembourg]

@aleclarson here try now https://codesandbox.io/s/sweet-hooks-xgpse?fontsize=14

[aleclarson]

Try to animate your list while keeping the length of the list same

This isn't clear enough. But looking at the sandbox, it seems you want the "Reload data" button to animate on every click, rather than only the first click?

[RayLuxembourg]

Try to animate your list while keeping the length of the list same

This isn't clear enough. But looking at the sandbox, it seems you want the "Reload data" button to animate on every click, rather than only the first click?

Ye I want it to reanimate when the state its looking at changes. or at least give an api to re animate programatically.

[aleclarson]

The useTransition hook has a trail prop. Try that?

[RayLuxembourg]

as a trail prop

Could you display on sandbox how to do it to achieve what we are discussing?

after playing around I don't see how useTransition can help me.

[ChanceTheHacker]

I do not believe this is a problem with react-spring, but an issue with react. When setting state, if i recall correctly, state checks to see if the state is the same or different. If the state is the same, than react does not change it, and therefore since state does not change, react does not re-render, therefore react spring does not animate because react has not changed anything.

The solution Alec is referring to with useTransition would be to make the button on click, mount and unmount the components. Instead of using useTrail, set up the same thing with useTransition, then set the trail prop to true.

[RayLuxembourg]

I do not believe this is a problem with react-spring, but an issue with react. When setting state, if i recall correctly, state checks to see if the state is the same or different. If the state is the same, than react does not change it, and therefore since state does not change, react does not re-render, therefore react spring does not animate because react has not changed anything.

The solution Alec is referring to with useTransition would be to make the button on click, mount and unmount the components. Instead of using useTrail, set up the same thing with useTransition, then set the trail prop to true.

There is a change in state and that is not a react issue. The implementation of react spring probably uses useEffect to detect changes and its being based on length/ count. There should be deeper detection like item.key to see if items have changed.

[ChanceTheHacker]

There is a change in state and that is not a react issue. The implementation of react spring probably uses useEffect to detect changes and its being based on length/ count. There should be deeper detection like item.key to see if items have changed.

You are right, I must have been confused with useState, I know there is a way to compare the two and not change on compare, I thought that was the default procedure in React for some reason.

However like Alec mentioned above, using useTransition should fix the issue. https://www.react-spring.io/docs/hooks/use-transition

The trail and the unique prop will be helpful

trail | number | Delay in ms before the animation starts, adds up for each enter/update and leave
unique | bool/fn | If this is true, items going in and out with the same key will be re-used

[RayLuxembourg]

There is a change in state and that is not a react issue. The implementation of react spring probably uses useEffect to detect changes and its being based on length/ count. There should be deeper detection like item.key to see if items have changed.

You are right, I must have been confused with useState, I know there is a way to compare the two and not change on compare, I thought that was the default procedure in React for some reason.

However like Alec mentioned above, using useTransition above should fix the issue. https://www.react-spring.io/docs/hooks/use-transition

The trail and the unique prop will be helpful

trail | number | Delay in ms before the animation starts, adds up for each enter/update and leave
unique | bool/fn | If this is true, items going in and out with the same key will be re-used

I actually tried use transition and it didn’t help. If you could create a sandbox which uses an array and on click reverses the array and causes to reanimate then it means it works.

[ChanceTheHacker]

I will put one together for you tomorrow, I'm heading to bed currently.

[ChanceTheHacker]

Here is a working code sandbox. I found out what the actual bug is here in the process of putting it together.
https://codesandbox.io/s/cranky-cdn-ru0wy?fontsize=14&hidenavigation=1&theme=dark

The problem is that (at least with useTransition, I did not try trail) the elements were not given sufficient time to unmount, before remounting. I used setTimeout 200ms * the array length. This allowed the proper amount of time to pass so the leave animation could play completely. If the leave animation was allowed to play in full first, then the enter animation was allowed to play. If the leave animation was interrupted before finishing, all the new data was just put directly into place without animating in.

[RayLuxembourg]

Here is a working code sandbox. I found out what the actual bug is here in the process of putting it together.
https://codesandbox.io/s/cranky-cdn-ru0wy?fontsize=14&hidenavigation=1&theme=dark

The problem is that (at least with useTransition, I did not try trail) the elements were not given sufficient time to unmount, before remounting. I used setTimeout 200ms * the array length. This allowed the proper amount of time to pass so the leave animation could play completely. If the leave animation was allowed to play in full first, then the enter animation was allowed to play. If the leave animation was interrupted before finishing, all the new data was just put directly into place without animating in.

Doesn't work.

[ChanceTheHacker]

Ugh, somehow changes I made did not save. I will fix it later this evening.

On Wed, Nov 20, 2019, 9:12 AM Ray Luxembourg [e-mail]
wrote:

Here is a working code sandbox. I found out what the actual bug is here in
the process of putting it together.

https://codesandbox.io/s/cranky-cdn-ru0wy?fontsize=14&hidenavigation=1&theme=dark

The problem is that (at least with useTransition, I did not try trail) the
elements were not given sufficient time to unmount, before remounting. I
used setTimeout 200ms * the array length. This allowed the proper amount of
time to pass so the leave animation could play completely. If the leave
animation was allowed to play in full first, then the enter animation was
allowed to play. If the leave animation was interrupted before finishing,
all the new data was just put directly into place without animating in.

Doesn't work.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/react-spring/react-spring/issues/839?email_source=notifications&email_token=AJJNGZWT3HWBRCWJ5B66PZDQUVAU5A5CNFSM4JE4YBGKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEESDBPQ#issuecomment-556019902,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AJJNGZTAVTCAOP7RYA2JZ73QUVAU5ANCNFSM4JE4YBGA
.

[RayLuxembourg]

Ugh, somehow changes I made did not save. I will fix it later this evening.
…
On Wed, Nov 20, 2019, 9:12 AM Ray Luxembourg @.*> wrote: Here is a working code sandbox. I found out what the actual bug is here in the process of putting it together. https://codesandbox.io/s/cranky-cdn-ru0wy?fontsize=14&hidenavigation=1&theme=dark The problem is that (at least with useTransition, I did not try trail) the elements were not given sufficient time to unmount, before remounting. I used setTimeout 200ms * the array length. This allowed the proper amount of time to pass so the leave animation could play completely. If the leave animation was allowed to play in full first, then the enter animation was allowed to play. If the leave animation was interrupted before finishing, all the new data was just put directly into place without animating in. Doesn't work. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#839?email_source=notifications&email_token=AJJNGZWT3HWBRCWJ5B66PZDQUVAU5A5CNFSM4JE4YBGKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEESDBPQ#issuecomment-556019902>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AJJNGZTAVTCAOP7RYA2JZ73QUVAU5ANCNFSM4JE4YBGA .

nvm check this. https://codesandbox.io/s/elegant-hill-nphxt
This is very bad.

[RayLuxembourg]

And like I said the real issue is here. https://github.com/react-spring/react-spring/blob/master/src/useTrail.js

to much weight on just length.
I am going to fix this myself and create pull request.

[aleclarson]

If you're going to make a PR, please use the feat/spring-class branch.

[RayLuxembourg]

If you're going to make a PR, please use the feat/spring-class branch.

I just want to add functionality to useTrail at this moment. I don't see useTrail in that branch you specified.

[aleclarson]

Here: https://github.com/react-spring/react-spring/blob/feat/spring-class/packages/core/src/hooks/useTrail.ts

If you have other questions, let me know!

[bslipek]

Try set reset: true https://www.react-spring.io/docs/hooks/api, works for me.