Smooth scrolling (or Animations) about react-window HOT 2 CLOSED

Duplicate of #16

Short answer is: Nothing is built it, but you can use the scrollTo API to achieve this.

Here's a Code Sandbox that shows one possible option for this:
https://codesandbox.io/s/k2lpl9m0l3

from react-window.

@hizo
the problem you'll face there is that you'll have to render all the items in between.
if you have a list with 10'000 items and you are currently on position 1, you'd have to render all 9000 items if you'd like to jump to index 9000.

You could possibly do a similar effect with css.
If you overrender the list enough and then use transform to animate some kind of flyin effect, you could get a smooth animation.

Thing is. All javascript animations including css animations are processed in the same thread as the "normal" javascript.
Only a few properties can be rendered with hardware acceleration ( GPU not CPU ). Try it with transform or opacity.

Conclusion: if you want to do smooth scrolling, overrender the list and create a keyframe with transform: translateY. That could potentially work.

from react-window.