You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
PatternFly Modals (and Backdrop that it uses) currently lack a smooth animation from closed->open->closed states.
This works well for smaller modals showing simple information or requiring a simple action from the user; But for larger modals it is really jarring.
A proposed new component <Tearsheet> that leverages the <Modal> makes this missing animation a larger friction point with a near-full-screen modal size.
Modal and Backdrop could function like the other PF components that already opt-in to animations via <AnimationsProvider>. opt-in is important to not break or regress the performance of pages depending on the as-is of Modals/Backdrops.
User Story
As a user, when I use a Modal with rich information or a form, it is jarring to see it flash on screen with no visual easing from the open-to-closed state.
Visuals & Mockups
animated-modal.mp4
Interaction States & Variations
On opening: modal fades in + shifts down a few pixels slightly and falls full into view
On closing: modal fades out + shifts up a few pixels slightly and is removed from view
Is this a new component or an extension?
Enhancement to a current feature
Existing Component
Modal, Backdrop
Describe the feature
Modal & Backdrop animation support
PatternFly Modals (and Backdrop that it uses) currently lack a smooth animation from closed->open->closed states.
This works well for smaller modals showing simple information or requiring a simple action from the user; But for larger modals it is really jarring.
A proposed new component
<Tearsheet>that leverages the<Modal>makes this missing animation a larger friction point with a near-full-screen modal size.Modal and Backdrop could function like the other PF components that already opt-in to animations via
<AnimationsProvider>. opt-in is important to not break or regress the performance of pages depending on the as-is of Modals/Backdrops.User Story
As a user, when I use a Modal with rich information or a form, it is jarring to see it flash on screen with no visual easing from the open-to-closed state.
Visuals & Mockups
animated-modal.mp4
Interaction States & Variations
On opening: modal fades in + shifts down a few pixels slightly and falls full into view
On closing: modal fades out + shifts up a few pixels slightly and is removed from view
Accessibility (A11y)
No response
Product & Target Release
No response
Contribution
I am interested in contributing this feature.
I have searched for similar existing requests.
Jira Issue: PF-4419