React-window: [Q] About animating and dynamically growing items

[pandaiolo]

First thanks for the great work on that library!

I was asking myself a question about items animation. I have been using react-virtualized so far, but it also applies to react-window.

The current positioning strategy is to use absolute offset based on scroll position, right? Which makes it difficult to use CSS techniques to animate items. JS techniques are also problematic if they involve re-rendering the whole list each frame.

Do you have a suggestion on the best way to implement this? Typically, think about a contact card in a contact list, that can be expanded with more info.

Do you think static positioning would work? For example, by adding a transparent div the size of the items prepending the windowed items? (yes I mean me developing another custom solution for my specific purpose, but I wanted to ask the question as you explored this a lot more and migh see the obvious issues with this strategy :))

[bvaughn]

Here's a Code Sandbox that shows how to use CSS transitions to animate size and position of items within a react-window list: https://codesandbox.io/s/n753oo58vj

Do you think static positioning would work? For example, by adding a transparent div the size of the items prepending the windowed items?

It might work. I tried this approach a long time ago with react-virtualized and I don't remember what specifically about it was less appealing. All I can say is that the current approach– either absolutely positioning or using e.g. translate is the easiest to implement and performs well. (Performance is my primary concern with a lib like this.)

[pandaiolo]

Seems pretty fast! Thanks for your answer @bvaughn

[pksjce]

Hey! Thanks for this example!
I didnt know that you could use react-window without renderprops too.

[apuntovanini]

Hi @bvaughn, I've seen the example which properly animates height, but can't reproduce with shuffling items: if I apply both css transition and transform properties to position the elements, even if I change the order of items, they won't animate. Is that even possible? Thanks!

[bvaughn]

This is not something I have had to implement before. I'm sorry but you'll need to experiment a bit 😅 Afraid I can't help.

[apuntovanini]

Thanks @bvaughn anyway, I tried plugging in react-flip-toolkit using spring but the result is not satisfactory. I'll explore a bit more, even if it seems really difficult to do so in few lines. I'll keep you posted in case I find a solution!

[danielo515]

@apuntovanini did you find a satisfactory solution to your problem?

[apuntovanini]

@danielo515 unfortunately not, the problem with spring is that it keeps animating from [0,0] when you scroll, since component doesn't know the predicted position of the virtualized item. I gave up, the feature is a nice to have, even if I'd love to implement it seems way too time-consuming atm...
Did you try anything?

[danielo515]

I just tried some basic animations from material ui (which uses react transition group) and I have the same problem. Every time you scroll the entering animation is executed.

[deadbeef84]

@apuntovanini I think the reason your css transitions/animations are failing is because the elements are moved in the dom; this causes the dom elements layout state to reset, so it cannot animate. I actually thought React was the problem first, but the same things happen with vanilla js using appendChild to move nodes.

With absolute positioning dom element order may not be important (still affects z-index), there's a PR to preserve element order which makes css transitions/animations work perfectly.

[apuntovanini]

Wow, looks promising! Thanks @deadbeef84

[hallandsen]

I've looked for a way to animate list items within react-window and found this thread. Can anyone explain to me why I can get #1 sandbox to animate using CSS transition but not #2 sandbox?

1 https://codesandbox.io/s/react-window-animated-item-resize-szgdf?file=/src/Demo.js:1085-1087

2 https://codesandbox.io/s/bvaughnreact-window-variable-size-list-vertical-qwm53?file=/index.js

Thanks in advance 🤞

[iradkot]

@hallandsen

I've looked for a way to animate list items within react-window and found this thread. Can anyone explain to me why I can get #1 sandbox to animate using CSS transition but not #2 sandbox?

1 https://codesandbox.io/s/react-window-animated-item-resize-szgdf?file=/src/Demo.js:1085-1087

2 https://codesandbox.io/s/bvaughnreact-window-variable-size-list-vertical-qwm53?file=/index.js

Thanks in advance 🤞

Apparently every time you recreate the function inside the VariableSizeList it ruins the transition of the rows height,
So in order to fix that in the #2 example you need to use useMemo if you are using function component or declare the function as a class function(this.renderItem)
Here is #2 with the row height transition:
https://codesandbox.io/s/bvaughnreact-window-variable-size-list-vertical-gzqi8?file=/index.js:759-780

[danielo515]

@hallandsen

I've looked for a way to animate list items within react-window and found this thread. Can anyone explain to me why I can get #1 sandbox to animate using CSS transition but not #2 sandbox?

1 https://codesandbox.io/s/react-window-animated-item-resize-szgdf?file=/src/Demo.js:1085-1087

2 https://codesandbox.io/s/bvaughnreact-window-variable-size-list-vertical-qwm53?file=/index.js

Thanks in advance crossed_fingers

Apparently every time you recreate the function inside the VariableSizeList it ruins the transition of the rows height,
So in order to fix that in the #2 example you need to use useMemo if you are using function component or declare the function as a class function(this.renderItem)
Here is #2 with the row height transition:
https://codesandbox.io/s/bvaughnreact-window-variable-size-list-vertical-gzqi8?file=/index.js:759-780

That looks awesome, thanks