[DRAFT] Snappier animation settings for flyouts

[ryankeairns]

Summary

There is some adjacent work going on to bring animations to EuiFlyoutChild, so I wanted to take a parallel swipe at updating the animation settings (see #8896).

This PR is a test to make the animation feel a little more snappy: faster in the front and middle, then ease out.
Versus what we have today which is, in comparison, a bit more slow in the beginning and end.

Changes

1. NEW cubic-bezier(0.32, 0.72, 0, 1) feels more alive/snappy.
2. OLD cubic-bezier(.694, .0482, .335, 1) is more smooth/natural

Tweaked the keyframe from 75% to 85%. This change makes the flyout animation feel less abrupt, as the flyout spends more time in motion rather than too quickly snapping to its final position.

Testing notes

Preview and compare old versus new:

1. Open the staging docs link from this PR...
2. alongside the prod docs link.

Other impacts:

• animation.resistance is used in other components, but it is most noticeable in EuiFlyout.
• Take a peek at context menu and accordion ... I checked and it works as expected

To my eye, the keyframe and bezier tweaks make it ever so snappier (e.g. the title in the header leaves less of a visual 'trace')

TODO

• Undo change to Amsterdam file

[weronikaolejniczak]

It's a subtle difference between prod and staging but the animation looks smoother indeed 👌🏻 The code is clean as well, I'm glad we're updating an animation token.

[ryankeairns]

Something that I am uncertain about is how this looks for 'large' flyouts.

Before opening and merging this, let's test the settings in the parent+child setup once @tkajtoch gets to adding animations there. It could be better or worse: better because there are multiple flyouts moving and seeing the full animation from 0 to 100 might be jarring; worse if this animation seems to begin too late.

I think it may be better but need to see it in the flesh before deciding and would love input from others, again, at that point.

[tkajtoch]

I LOVE this new animation! I tested it with size="l" prop added to EuiFlyout, and I think it looks just as good

[ryankeairns]

Quick update:

• waiting to open after Clint's PR is merged, so that I can test this on top of those animation changes.

[weronikaolejniczak]

@ryankeairns if it's not ready to be merged / approved / tested for final results, could we mark it as a draft PR?

[ryankeairns]

Ah, neat! I had accidentally clicked 'Ready for review' last week when I meant to click 'Update branch'
I didn't realize you could revert back to draft.. done!

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 8ffce26
• Documentation website
• Storybook

History

• 💚 Build #1007 succeeded 6b0c53d
• 💚 Build #1006 succeeded 6b0c53d
• 💚 Build #944 succeeded feeb020
• 💚 Build #938 succeeded 1f51816
• 💚 Build #937 succeeded 1f51816
• 💚 Build #912 succeeded 0a35d41

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 8ffce26

History

• 💚 Build #4547 succeeded 6b0c53d
• 💚 Build #4504 succeeded feeb020
• 💚 Build #4478 succeeded 0a35d41

[ryankeairns]

@tkajtoch closing this as I believe you have worked through (or are close to working through) the flyout changes.

[tkajtoch]

I'll integrate your changes into my animations PR!