Compared to native, the fade in/fade out seems a little strong, especially when going from searchable to searchable. Other than that, LGTM.

It's tricky because in some apps there's a strong fade, in others not so much. For example, in the iOS contacts app, the fade looks quite strong:

I don't understand the logic behind this.

Can we assume it's a stronger fade if one of the pages doesn't have a searchbar?

Can we assume it's a stronger fade if one of the pages doesn't have a searchbar?

Fair assumption. I also tried adding a segmented control as the bottom using SwiftUI's .toolbar. But it seems like the strong fade doesn't happen in two instances:

1. .searchable transitions (both pages have a search field).
2. transitions triggered by pressing the Back button where the bottom widget on both pages are the same widgets in the same positions (dragging from the leading edge still fades in this case).

I'm unable to exactly trace the second case, so I'm thinking we just check for the first case in this PR for now. But in the first case, is there even a fade at all? It doesn't look like it.

Approach LGTM, I think it's just tweaking the values. Visually the fade looks not as subtle as native, just trying to figure out why.

Slowed down, it looks like the native curve is pretty different. It looks like it is opaque for longer, and the fade comes on sharper.

I'm finding it quite difficult to get the native values. Do you have any suggestions for the curve and other animation values?

I think the logic is as follows:

• The previous page and the next page are always aligned back to back and move together.
• The previous page has a gray overlay that fades in/out as the page shifts in/out.
• The titles have separate fading animation from the rest of the page. See the following screenshot, where the title at the top right corner is obviously semitransparent while the searching icon is as gray as when the animation ends.

• In some pages (such as the search page), the contents do not move synchronously with the page, while in others (such as the contact editing page) they do. This is probably just a coding error feature that's specific to pages. In the former case, the page content animates to the "current final" position with a spring physics, causing the content location to be constantly behind the page border.