Investigate 2d/3d transform about react-virtualized HOT 3 CLOSED

YAGNI. Closing for now.

from react-virtualized.

@bvaughn Could we revisit this? I have a carousel prototype working but I have to disable scroll behavior and animate scrollLeft with react-motion. Using a transform would enable css transitions for the scroll and could have much better performance.

from react-virtualized.

Could we revisit this?

Sure, feel free! I'm pretty swamped these days so I won't have the time/energy for it anytime soon. 😄

You can start without forking by just overriding the style param passed to your cellRenderer like so:

function rowRenderer({ index, key, style }) {
  const { top, ...filteredStyle } = style;

  return (
    <div
      className='Row'
      key={key}
      style={{
        ...filteredStyle,
        transform: `translateY(${top}px)`,
      }}
    >
      Row {index}
    </div>
  )
}

Here's a proof of concept: https://codesandbox.io/s/2vxx9nlqor

If results seem promising, let me know!

from react-virtualized.