Importing Adobe After Effects Animations into iOS Apps
Article Summary
Radoslaw Cieciwa from Bumble reveals why their gorgeous After Effects loading animation nearly killed iOS performance. Spoiler: trim paths and CPU rendering were the culprits.
When Badoo redesigned their app, they wanted to import a complex After Effects animation directly into iOS. The team evaluated Facebook's Keyframes and Airbnb's Lottie, ultimately choosing Lottie with the bodymovin exporter. What followed was a deep dive into performance optimization and the harsh realities of mobile animation.
Key Takeaways
- Trim paths and masks force CPU rendering instead of GPU, destroying 60fps target
- Lottie-iOS beat Facebook Keyframes for supporting path trimming and complex vectors
- Letters with holes (B, D, A) use unsupported merged layers, causing render issues
- Final solution: split animation into separate files, swap letter drawing for fade transitions
Complex After Effects animations look perfect on desktop but require significant compromises on mobile to maintain performance, often forcing teams to fake effects rather than render them accurately.
About This Article
Badoo's After Effects animation file had structural problems. Trim path inconsistencies created doubled layers, rotated letters rendered as different characters, and deeply nested compositions broke the vector-based rendering export guidelines.
Radoslaw Cieciwa's team flattened the file structure and removed unused layers. They eliminated sub-compositions and swapped the complex letter-drawing animations for simple fade in and fade out transitions to fit the performance constraints.
The animation now plays smoothly at 60fps. The team split the sequence into separate exported files at each transition point: heartbeat, logo drawing, counter, and card dismissal. This kept the visual quality intact while hitting the performance targets.