Sliding around on liquid glass with Maps

Banner by Karthik Sreenivas on Unsplash

Apple Maps showcases some of the best features of Liquid Glass because it’s primarily focused on the content, in this case, the map. That’s the part that takes precedence and it shows, it’s the largest part of the screen and panels are semi-translucent so the content can still be seen behind it.

Lets see what happens when we take a look a the map modes though. Seems okay at first as we tap through from Explore to Driving to Public Transport but wait a minute. What the hell was that?

Satellite is a bit different. For some reason it decided to change from a light theme to a dark theme but there’s also something else that happened. Let’s slow it down!

There’s multiple things that happen all at once:

• Whole app snaps from light to dark, no transition at all
• The introduction of two new toggles for Traffic and Labels pushes the height of the sheet up. They fade in from a blurred state to arrive at the correct position
• The label that’s stayed static the whole time “©️OpenStreetMap and other data providers” has a moment of panic as it doesn’t quite know where to go so it just slides up and down until the other elements have stopped moving

When transitioning back to Public Transport, the label at the bottom has another crisis. It disappears completely before sliding back into place.

Why did this happen?

The light to dark change, that’s anyone’s guess. I suspect it’s to differentiate from the map which could be far more colourful than the other clean, curated and vectorized maps in the other modes. The lack of transition is a bit jarring though, it looks like it just may not have been setup correctly to transition to and from light to dark.

As for the animations, from what I can see there’s a mismatch between animation easing and height calculations. The data provider label seems to overshoot its mark and bounce around. This means it’s got a spring animation or some other kind of easing applied. The two toggle items in the list have a linear transition. When in close proximity, it’s obvious that there’s a mismatch because they can slide over each other.

The other issue is the height calculation/ordering during animation which I see very now and then, here it looks like:

1. The list calculated the final position and started to animate
2. The label changed positions so it is now after the list
3. The animation for the list finished in the position it calculated earlier
4. Now the order is swapped, the list moves up instantly