Join GitHub today
GitHub is home to over 31 million developers working together to host and review code, manage projects, and build software together.Sign up
[FEATURE components] Add <Collapse> component #1114
Deploy preview for artsy-reaction ready!
Built with commit 1ce39e6
ds300 left a comment
Sorry to butt in
Most people these days stick to animating
With those two properties you can achieve a really nice 'collapse'-like effect that won't get all janky on busy pages or less powerful machines.
Here's Airbnb's version in action:
Great addition @ds300
I've heard great things about this: https://popmotion.io/pose/ it apparently errs on the side of performance and is quite flexible.
(Personally I've rolled my own on previous projects, sometimes with help from react-transition-group, though not convinced that's the best tradeoff in terms of time/bloat)
I'm not that concerned about performance, but just FYI,
Aug 14, 2018
6 checks passed
Cool stuff Yuki! These benchmarks are mainly helpful relative to each other. We'd need to benchmark the transition on a page with a more representative quantity and arrangement of elements to get a better picture of whether performance is good or not, since the cost associated with animating `height` is in re-computing the layout of the page. If the entire page is like 4 elements that's not going to take much time :) I suspect we'll be OK with BNMO pages, but would be a little more weary of using this on more busy pages like artist and the home page, speaking from personal experience.…
On Tue, 14 Aug 2018, 19:25 Yuki Nishijima, ***@***.***> wrote: I ended up using react-spring since it has a universal component for React Native and it will make it easier to port this component when necessary. I'm not that concerned about performance, but just FYI, react-spring is slower than the plain CSS transition compoment. Here is the performance breakdown captured using Chrome's performance feture with 8 collapse animations running simultaneously and the settings of CPU throttling 6x slowdown: Plain CSS transition The lowest FPS was 18 with a rough average of 35 FPS: [image: screen shot 2018-08-14 at 12 38 29 pm] <https://user-images.githubusercontent.com/386234/44105700-79e30602-9fc0-11e8-93a7-22454b5262d0.png> react-spring The lowest FPS was 9 with a rough average of 23 FPS: [image: screen shot 2018-08-14 at 12 46 03 pm] <https://user-images.githubusercontent.com/386234/44105705-7cadec1c-9fc0-11e8-9c37-944b41a1eb53.png> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1114 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABL1qTZWbz_sqfQVI9bBfmUhQNEqMBlNks5uQxYJgaJpZM4V4oo7> .