patternfly / patternfly/patternfly-react

Modal,Backdrop - Add animation support

Open
#12,551 3 comments 1 reaction 1 assignee View on GitHub

@thatblindgeye is already working on this.

Since Sep 2, 2026.

Dominant language
TypeScript
Stars
862
Forks
392
Avg merge
4d 8h
Merged PRs (30d)
9

Description

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

https://github.com/user-attachments/assets/644f9584-d227-41ef-b0b4-7c6b7fd2eb09

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.