[EuiFlyout] Animate push flyouts

[ThomThomson]

Enhancement

Would it be possible to animate push flyouts like the overlay flyouts are animated?

Overlay

Push

Complication

It seems like the intention behind disabling animations on the push flyout was to avoid forcing width transitions on the rest of the page content. To get the best of both worlds, it might be possible to animate a child element instead of the parent element of the push flyout, so that the width change happens instantly, but the content of the flyout appears to animate in.

[cee-chen]

As you mentioned in your last paragraph, performance is the largest reason to avoid this. Animating width causes simultaneous reflow and repaint events which is the worst possible performance for animations (and will only scale worse for complex pages w/ lots of resize observers, etc).

As you also mentioned, doing a single width change with a transform is likely the easiest way to performantly add some sort of animation (https://developer.chrome.com/blog/performant-expand-and-collapse/), but I kinda question how "good" that will look (since the rest of the page will jump instantly while the content doesn't). Here's an example codesandbox of an accordion using that technique: https://codesandbox.io/s/983z7n92rw

I'll try to take some time later this week to spike out how a push flyout would look with that same type of animation, but we should definitely run this by a designer for final approval 😅

[ThomThomson]

For reference here's our use case:

On Dashboards, width changes are not animated but the transforms of the panels are, so when you open a push flyout you get a nice (slightly debounced so it only happens once) slide animation.

With the push flyout not animating at all, it can look slightly jarring.

[cee-chen]

@ThomThomson #7239 has a staging preview of push flyouts with a toggleable animation - is it looking good to you so far?

[ThomThomson]

@cee-chen that's amazing! It's exactly what I was picturing. I think it should work really well with the Dashboard's squashing animation.