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
Critical Insight
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.
