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.
About This Article
Anne Lu's team had to coordinate multiple animations at once. Growth, X/Y translation, 3D page rotation, and shadow movement each needed separate timing curves and keyframe-specific start and stop points, all within a 2.0-second window.
Airbnb used UIView.animateKeyframes with relative start times and durations to control exactly when each property animated within the overall timeline. They combined this with UIViewPropertyAnimator to handle dynamic playback control.
The team got pixel-perfect synchronization between the 3D passport animation and the modal transition. The spring timing was tuned so the X and Y coordinates lined up perfectly at the transition cutoff, even though the spring curve theoretically extended beyond the animation duration.