nkbt/react-collapse

Performance due to layout and paint

Closed this issue ยท 2 comments

Hi! Great work on this. ๐Ÿ‘

Have you considered using FLIP (or some other transform-based animation) instead of the CSS height tween?

The issue with animating height is that it triggers layout and paint and will perform poorly on low specced devices or pages where the frame time is already close to 16ms.

I'm not specifically asking for this, but curious if it's something that has been discussed and dropped because of the added complexity or some other factor.

nkbt commented

It was discussed as part of react-motion discussions. Css do not give enough control comparing to js and actually not that much more performant. Also ReactNative (which we fo not use, but I've heard some people do)...

I plan to rewrite collapse without react-motion (for different reasons) and will look at css transitions instead. Will do as much to avoid any extra dependencies. But at this point it is not a priority for me and I have no estimate

nkbt commented

As new react-collapse@5.0.0 is released https://github.com/nkbt/react-collapse/releases/tag/v5.0.0 this issue has been most likely already solved.

Please feel free to re-open if the issue persists