[EuiFlyout] Reduce slide-out animations#9514
Open
tsullivan wants to merge 5 commits intoelastic:mainfrom
Open
Conversation
tsullivan
changed the title
Collaborator
💚 Build SucceededHistory
|
Collaborator
💚 Build Succeeded
History
|
Contributor
There was a problem hiding this comment.
Pull request overview
This PR updates EuiFlyoutManager’s internal managed flyout behavior to reduce motion and prevent flicker by avoiding animated transitions between subsequent flyout changes, while keeping the initial opening animation for the first main flyout and first child flyout.
Changes:
- Added logic to only animate the initial flyout opening (first main session / first child in a session) and suppress opening animation for subsequent flyouts.
- Removed managed-flyout intermediate transition animations (backgrounding/returning/closing) and updated the activity stage hook to optionally skip intermediate stages.
- Updated unit tests and added a changelog entry describing the behavior change.
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/eui/src/components/flyout/manager/flyout_managed.tsx | Computes “initial opening” vs “subsequent transition” and suppresses the base flyout opening animation for subsequent openings |
| packages/eui/src/components/flyout/manager/flyout_managed.styles.ts | Removes 3D keyframe transitions and forces no managed animation across stages |
| packages/eui/src/components/flyout/manager/activity_stage.ts | Adds shouldAnimate option and refactors stage transition logic |
| packages/eui/src/components/flyout/manager/activity_stage.test.tsx | Expands tests to cover new “skip intermediate stages” behavior and the optional animated behavior |
| packages/eui/changelogs/upcoming/9514.md | Documents the flicker fix / animation reduction behavior |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| // Suppress EuiFlyout's built-in opening animation for non-initial flyouts. | ||
| !shouldAnimateOpening && | ||
| css` | ||
| animation-duration: 0s !important; |
Comment on lines
+37
to
+38
| * (e.g. CLOSING -> INACTIVE). Has no effect when `shouldAnimate` is false, | ||
| * since those stages are never entered. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Closes elastic/kibana#249242
This PR removes animations for "subsequent" transitions between flyouts. A subsequent transition everything but initial flyout activity. This means we're still animating the first appearance of a main flyout, and the first appearance of a child flyout. However, when we navigate from main-main or child-child, we're not animating that transition.
Acceptance criteria: make sure there is no flicker for any flyout animation events.
NOTE: currently there is no animation when closing a flyout. This PR doesn't change that.
API Changes
EuiManagedFlyoutimplementation.Screenshots
Before
Flyout.Subsequent.Animations.Demo.-.Before.mp4
After
Flyout.Subsequent.Animations.mp4
Impact Assessment
[ ] 🔴 Breaking changes — What will break? How many usages in Kibana/Cloud UI are impacted?[ ] 💅 Visual changes — May impact style overrides; could require visual testing. Explain and estimate impact.[ ] 🧪 Test impact — May break functional or snapshot tests (e.g., HTML structure, class names, default values).[ ] 🔧 Hard to integrate — If integration is complex, stage commits in Kibana/Cloud UI branches for cherry-picking and link to them below.Impact level: 🟢 None
Release Readiness
[ ] Documentation: {link to docs page(s)}[ ] Figma: {link to Figma or issue}[ ] Migration guide: {steps or link, for breaking/visual changes or deprecations}[ ] Adoption plan (new features): {link to issue/doc or outline who will integrate this and where}QA instructions for reviewer
Checklist before marking Ready for Review
[ ] QA: Tested docs changes[ ] Breaking changes: Addedbreaking changelabel (if applicable)Reviewer checklist