Building a smooth Stories experience on iOS

Loading animation

Along with dismissing animation of the story viewer, we wanted to indicate the loading of a story once tapped as seen above. This allows the user to receive visual feedback that their tap has been received, which is especially useful on slower or unreliable connections.

The loading animation consists of an animating ring around the user’s profile picture which also resizes itself simultaneously. The animation’s duration is indefinite—it continues until the story is actually loaded and the story viewer is ready to launch.

In building this loading circle, we had to consider how to encapsulate the animation logic away from the view and how to avoid bloating. In the first consideration specifically, we had to decide whether or not to use animation completion blocks for animation chaining. To address the latter issue, we encapsulated the animation logic into a utility class, which contains static methods to return CABasicAnimations and CAAnimationGroups with the desired animation properties. To address the second issue, we went with setting the beginTime of each animation rather than using animation completion blocks. Specifically, we set the beginTime of each CAAnimationGroup to match the design specifications, and chained all the animations together using beginTime.

One of the challenges in building this animation was managing and changing the multiple CAShapeLayers involved. It’s deceptively simple; there were multiple CAShapeLayers involved that had to be considered to achieve the desired animation effect. One takeaway is to make sure the CAShapeLayers have the correct bounds and frame to avoid strangely positioned animations. If an animation is animating from seemingly random places, the engineer should check on the bounds and frame properties.


The successful launch of Stories on iOS is the result of multiple teams’ efforts across different platforms. We would like to acknowledge Yasir Khan for building the player pool and providing advice on story foundation code, Cezary Wojcik for setting up the fundamental architecture for story viewer and animation, and Dafeng Jin for designing and implementing stories preload mechanism on iOS. Also a big thanks to the Stories core team: Mauroof Ahmed, Isha Patel, Luis Molina, Josh Zhang, and Bo Peng!

Source link