Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Q] About animating and dynamically growing items

See original GitHub issue

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 😃)

Issue Analytics

State:
Created 5 years ago
Comments:14 (2 by maintainers)

Top GitHub Comments

3reactions

bvaughncommented, Aug 4, 2018

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.)

1reaction

hallandsencommented, May 19, 2020

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 🤞

Top Results From Across the Web

Animation as a dynamic visualization technique for improving ...

Animation provides various mechanisms to help reduce the cognitive load during the learning process, specifically for dynamic phenomena [25]. Motivated by the ...

Create advanced animations with smart animate

Create advanced animations with smart animate · Loading sequences · Parallax scrolling · Touch gestures e.g. Drag, Swipe, Long-Press · Sliders, Toggles and...

Transition flex-grow with dynamic content height

You can see from my example code that I am specifying a value of 0.001 for flex-grow and that it animates successfully in...

Make your Animations DYNAMIC with Animation Rigging ...

Get the FULL course here at 80% OFF!! https://unitycodemonkey.com/courseultimateoverview.php Learn how to make BETTER games FASTER by ...

Creating Dynamic Animations - Unreal Engine Documentation

Using AnimDynamics to provide physically based secondary animations to a character. ... dynamic animations for items that they may be carrying or wearing....