Custom Navigational Transitions in iOS
Article Summary
Zalando's iOS team tackled a deceptively hard problem: creating smooth screen transitions when the entire UI is driven by the backend.
Most custom iOS transitions are straightforward when you control the UI. But what happens when your screens are backend-driven and navigation is handled by generic deep-link routing? Zalando's engineering team shares how they solved this for their fashion app.
Key Takeaways
- Backend-driven UI made identifying tapped views and their positions a major challenge
- Initial snapshot approach caused pixelation and awkward text scaling issues
- Recursive rendering with selective component inclusion created high-quality transitions
- Solution works generically across screens since it lives in the framework layer
By combining UIKit's View Controller Transitions API with custom recursive rendering, Zalando created smooth, production-ready transitions for their backend-driven iOS app.
About This Article
Zalando's backend-driven UI system didn't expose which view was tapped or its frame and position data. This made it hard to build custom transitions between the outfit-card and outfit-details screens.
The team intercepted the deep-link navigation flow to capture the tapped view's snapshot and frame information. They then built UIViewControllerAnimatedTransitioning with a CustomNavigationDelegate to animate the image scaling from source to destination.
Using recursive rendering with selective component inclusion removed pixelation and text scaling issues. The same high-quality transition now works generically across other screens in the backend-driven framework.