Thread by @tuhin

Over the last year I got to work on bringing fluidity to the Airbnb app.

We looked across entire guest side and through critical journeys and established a spatial model of our “canvas” — system (account & camera), map, base and scrim (media + modality).

Map transitions were designed to emphasize that map lived “behind” base canvas and reinforced the idea of “going somewhere” through a portal.

We established a wider expression of modality - popovers & stackable modal sheets that did not force people to leave the previous context making flows cognitively less taxing.

Our popovers and context sheets allow for various sizes based on needs of the product teams and support dynamic type as well as stacking.

All modals can be swiped down upon to dismiss them and are paired with haptics to give tactile feedback once you cross the threshold.

All transitions use the same underlying animation system of views that grow contextually from the source and animate into the destination view.

We worked through exposing right parameters like anchoring of animating elements , scale vs fit etc.

The final hero was the full screen grow transition created especially for our unique inventory. A particularly interesting challenge was how do you allow edge swipe as well as swipe down from the top.

Our PDP transitions support swiping down from top scroll position of a view, edge swipe or grabbing the title bar at any scroll position. Our first version treated the X and Y gestures independently and used only scale to unify edge swipe and swipe down transitions.

As a final tweak we added panning support while swiping down a view. While minor it feels considerably natural vs a uni-directional swipe. It also unified edge swipe and swipe down to feel like extensions of the same action.

While all cosmetic seeming changes they make the whole app feel significantly more fun to move around in and fluid.

Also major props to @EricHoracek without who all of this would never have been built in such a robust way.