Books: The phantom button

Banner image by mymind on Unsplash

What’s made animations in iOS feel great most of the time is physicality. Liquid Glass attempts to extend that vision with the way it behaves, showing chromatic adoration, distortion on the edges and, refracting what’s beneath the control. I’ve gotten used to the new design language and most of the apps I use have done a pretty good job of adapting but some of Apple’s own apps still have some challenges.

I noticed this issue with the Books app where the button in the top bar behaves normally on first scroll but if you open and close the menu then go to scroll again, the text disappears but the button remains.

What’s going on?

It looks like there’s a few competing interactions which makes this difficult to get right.

1. The button is also a menu and morphs into a massive list when tapped
2. The button should fade out when scrolling down
3. The button should fade in when scrolling back to the top

What I suspect it is going on here is that tapping the button opens the menu which sets up some events to be triggered when the animation stops.

When the scroll container is at the start, this also triggers the button to fade in and sets up some more events. When scrolling down, we try to trigger the fade out but there might still be some animations playing/the finished events haven’t been fired. That leads to bad state where the animation for fading out the text immediately is cleaned up so disappears. Then later the button itself which should be animating out also gets cleaned up.

Bugs like this can be awkward to reproduce and I may even be way off as to the cause but it’s interesting to try and break down what’s happened to build up an intuition for how to start diagnosing our own animation issues.

If I were redesigning this interaction, I’m not sure the button needs to disappear at all. It’s a sticky button but it doesn’t need to be unless the user is able to interact with it halfway down the page. The way it works right now is that it disappears as you scroll. It could just be a static button in the header that disappears when it’s obscured by scrolling down.

The other phantom

The animation for opening the menu is pretty fast, so fast you may have missed that there was also something odd going on. The menu opens to it's halfway state, the next frame it's back at the start and then it animates normally to its full open state.

This issue might point to a wider issue with the animations on buttons that turn into menus or the animation system in general. Usually, the final state of the animation would be computed to figure out how to interpolate everything inbetween, for some reason the animation looks like it starts at exactly halfway through the cycle. It's another subtle issue but these little papercuts build up over daily use and contribute to the idea that Liquid Glass although visually impressive, isn't as smooth and polished as we'd hoped.