Modal,Backdrop - Add animation support

[GAUNSD]

Is this a new component or an extension?

Enhancement to a current feature

Existing Component

Modal, Backdrop

Describe the feature

Modal & Backdrop animation support

• See related issue: Tearsheet - New component based on Modal #12519

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

[coderabbitai]

🔗 Related PRs

#12288 - feat(Accordion): Added isPlain and isNoPlainOnGlass prop to Accordion [merged]
#12466 - fix(BullhornIcon): Replace BullhornIcon with RhUiAttentionBellFillIcon [merged]

---

📝 Issue Planner

_{Check the box below or use the @coderabbitai plan command to generate an implementation plan and prompts that you can use with your favorite coding assistant.}

• Create Plan

---

🧪 Issue enrichment is currently in open beta.

You can configure auto-planning by selecting labels in the issue_enrichment configuration.

To disable automatic issue enrichment, add the following to your .coderabbit.yaml:

issue_enrichment:
  auto_enrich:
    enabled: false

💬 Have feedback or questions? Drop into our discord!

[GAUNSD]

• PR: feat(Modal,Backdrop): Add opt-in animation support #12552