Animations: Bringing the Host Passport to Life on iOS
Article Summary
Anne Lu from Airbnb reveals how her team built a 3D page-flipping animation that looks effortless but required solving novel iOS challenges. The Host Passport feature needed pixel-perfect timing across multiple synchronized animations.
Airbnb's iOS team created the Host Passport, a delightful 3D book animation that introduces hosts to guests in Private Room listings. Released in May 2023, this feature required bridging UIKit's animation framework with custom 3D transforms, all while maintaining 60fps performance and seamless integration with their declarative transition system.
Key Takeaways
- Used transparent half-views to simulate page rotation without disrupting anchor point transforms
- Swapped front and back views at orthogonal angle to create realistic page flip illusion
- Custom UIViewPropertyAnimator snapshots enabled 3D animation during screen transitions
- Spring timing curves required extensive tuning to sync with modal transition cutoff
- Keyframe animations coordinated growth, translation, rotation, and shadows simultaneously
Airbnb achieved a fluid 3D book animation on iOS by combining UIKit's animation framework with clever view composition tricks and precisely timed keyframes, despite SwiftUI lacking the necessary APIs.
