React animation comparison

[aholachek]

Hi there, after your tweet about my React animation comparison project and the awesome new experimental hooks interface, I decided to give it another go implementing the project's test case in react-spring.

I am not sure what I have found are bugs or just mistakes I am making, so please feel free to close this issue if it isn't helpful (I'd just love to be able to get a working example with react-spring because the API is so nice!)

Here's the sandbox example to show the issues I ran into.

Problem 1: The "add an item" interaction successfully adds a card to the list, but the enter animation is never run so it remains in the (invisible) from state.
Problem 2: The "Remove an item" interaction is not working-- the items array returned by useTransition remains the original size, so no exit animations occur.
Problem 3: When the items are shuffled, the staggering happens out of order on exit animations.
Problem 4: On repeat animations, the container enters from the leave state and not from the from state as I would have wanted.

[drcmda]

Hey Alex! I will take a look ...

At first sight, if i remove ref: itemsRef it starts working, this is problematic of course. Ref takes away the ability of an animation hook to "start" (since useChain is now taking control). So the update comes in but it doesn't start since the chain doesn't change (it memoizes the order of items). Kind of odd that we didn't think of this, but it just didn't pop up in the examples that we made. This is not correct and has to be fixed, perhaps removing the memo from useChain is a possible solution.

I'll complete your demo, shuffle and all and will ping you when it's done.

Super happy about your stress test article btw. I feel like if we can can survive it flawless one day it will be some sort of achievement. :-)

[drcmda]

Almost through, there really were a couple of flaws in how useChain refuses to update through its memo function.

[drcmda]

@aholachek would you be be interested in viewing over some of the considerations i've made? Your demo has been perfect to guard against async hell, and i've spent some time going through the basics like what constitutes a start/stop, etc. I've reached a point where you can't kill it any longer (i tried all libs on freshtilledsoil and none of them can take wild/random clicks - some behave weird, others die/blow up.

But there are open questions that have no clear answer atm. This comes down to pure tweaking now, creating edgecase rules like what happens if a spring has a trail and is started again, should it ignore its trail or wait again (which looks unnatural), etc. Or if you click open/close- should the container stop abruptly, wait for items, then move out? I've playing around with injecting slower configs instead of stopping, which seems more natural.

[aholachek]

@drcmda thank you very much for working on this!

For me personally, fixing the individual items' enter/exit was the most important thing. I think some unnatural movement during edge cases such as rapid transitions or cancellations is very acceptable, as long as the UI always ends up in the expected state.

I'd be happy to test out what you have and give feedback (with the caveat that I am still a beginner react-spring user), is there a beta I could try?

[drcmda]

there was, and it looked good compared to the libs in the storybook, but i toppled it again b/c it had another small kink i couldn't understand why it's doing it. 😓i have a good idea now what the basics are that need to be fulfilled to get all this async stuff under wraps. but it will take still a little more time. i'll ping you here if i have a demo online ready to test.

[drcmda]

hey @aholachek here's my current state. https://codesandbox.io/s/r4qj1n1vop

the trick was decoupling delay from the springs. now items can drop in and out while the container is still wiggling in. clicking fast will always sync with state. though right now the container is set to "unique", which re-uses it, clicking fast resets it back to left position. without these flags boxes come in and out undisturbed, but there's still some edgecase i am hunting down where the whole thing disappears. i will find it.

Anyway, what do you think so far?

[aholachek]

It looks very nice! I enthusiastically tried to break it and couldn't find any issues. I'm excited to update the react-spring example in the project whenever you release it.

[drcmda]

@aholachek the api is now stable, i am just waiting for hooks to drop, but the current beta.4 is what i will release. The api is detailed here: http://react-spring-hooks.surge.sh

Your updated example: https://codesandbox.io/s/r4qj1n1vop

I would be happy if you could update the freshtiledsoil article. I would love to talk about this a little at react-europe if you don't mind. Most certainly learned a lot, though for sure there will be other such cases in the future where the api isn't enough.

[aholachek]

This looks fantastic! Thanks for working on this, I will update the project repo this weekend and put a "newly updated" banner at the top. (Updating the article will be a bit harder since I haven't worked at that company for a while). I'll comment here when the changes are live.

[aholachek]

Hi, I updated my react-animation-comparison project to include the new hooks code. React-spring definitely edged out react-pose with the new hooks API (and some longstanding bugs in react-pose.)

I mentioned one thing in the react-spring example that I couldn't get working perfectly (the reversing card translateY enter/exit animation) so if you have any feedback on whether I could update the implementation to get that working, I could change it, but otherwise I think it looks pretty good as is!

[drcmda]

@aholachek thanks for putting this together! As for the trail reverse, since that's only delays it can be done. useTrail has the reverse flag, i am trying to port this to useTransition.