Code: Fix modal transitions

[anitadesigns]

Summary

Design is working on a new experience that may or may not include modals. For our current flow, our modals appear too fast and it may feel jarring to users.

We should transition the modal in so it's less immediate and feels more natural.

Background

The current implementation of modals, particularly the transition effect that causes a flash of the previous screen before the modal appears, negatively impacts user experience. This behavior disrupts the smooth flow of navigation and detracts from the overall professionalism of the site.

Current state

On screens before a modal when a user clicks continue

1. the form changes
2. the modal appears
3. the background dims

It all happens so fast that it does not feel very natural. See linked slow motion screencast
https://www.loom.com/share/0221fc46905a4913bbb30de4b26d144c?sid=829ad0ae-2403-45b5-a039-42b7fe4a6616

Requirements

• Background dim and Modal should appear simultaneously
• modal should appear before the form changes

Resources/Notes

• MAIN: MAIN: Improve modal transition #1522

[anitadesigns]

Will add more to "Action items" once a solution is in place

[rcpeng34]

@anitadesigns @sydneywalcoff I think there's only 3 modals in the flow right?

[sydneywalcoff]

@rcpeng34 unsure, but that shouldn't change how we implement the bug fix.