We talked with Leandro Tami, developer of this project and iOS Tech Leader at Lateral View, to understand what were the animation challenges Polyvibe presented.
The design team at Indicius needed an experienced developing team who could deal with some parts of the app in order to accomplish their release deadline. Lateral View got in control of the project’s HD precise animations in order to help developers and Indicius achieve a responsive app with a seamless feel and an enjoyable and intuitive user experience.
Their first task was to build an animated tab bar with fluid transitions that let users go from one section to another without feeling the movement was rough in the edges. After that, they focused on user statistics. They created a world map with animations that showed accurately which cities of the world were inhabited by the users that have seen a certain story and produced an animated graphic that showed the number of views a story had had throughout the day. Lateral View also provided support to Indicius in the creation of animated emojis working with After Effects.
The Tab Bar was the hardest part. It required a lot of work, effort and research. Prior to Lateral View’s arrival to the project, Indicius had tried to get to a solution without third-party tools, based only on code in order to draw the entire interface and its transitions. This didn’t produce the desired outcome and ended up taking a lot of time for the developers.
Leandro Tami said that when they work on these kind of problems they usually explore different solutions, specially Quartzcode and Keyframes. The first one is a tool that allows you to visually design the animations generating automatically the code you need to use on your app. This did not work because the animation that the tab bar needed was much more complex than the ones Quartzcode is able to handle.
So, they tried Keyframes, a recently launched Facebook framework that promised to convert After Effects animation into a JSON representation that could be used in apps. They Keyframes presented several limitations as to how each animation should be formed with After Effects but there was no better option. After working solving the tab bar problem, they decided to apply this same mechanism to generate the animated emojis. It is important to notice that all of these happened before the launch of Lottie, one of today’s most popular animation frameworks.
The second place regarding the top complexity tasks was taken by user statistics. The map that showed users that have seen a certain story and linked them to a certain country or city was tough. It was an artistic representation of the world map and didn’t keep the real proportions according to the Mercator projection which is the most classically used in these cases. Creating the map required a close interaction with the Indicius designers in order for them to understand and adopt these proportions. It also needed a database of centroids (central geographic point for each country or region) that was used to locate each country on the map.
Lateral View’s team was made up by Leandro Tami developing support for animations on iOS and an internal design team generating and converting After Effects animations with the tools provided by Keyframes. They had daily meetings with Indicius in which they reported the tasks they were working on, decided which steps to take next and sorted out Keyframes’ limitations.
The hard work and research added specific features that became part of what Polyvibe is today: a social network for iOS with a twist. It offers the usual functions of this type of platform, such as sharing photos, videos or messages in the form of stories and it also transforms the users’ faces into animated emojis just as the new iPhone X and Samsung S9 do but without needing to buy those smartphones. It was launched in August 2017. Available for download in the App Store.