The heart of tech is coming to the heart of the Mediterranean. Join TNW in València this March 🇪🇸

This article was published on December 10, 2013

Here’s why Facebook developed a new tool to help it animate Chat Heads and Cover Feeds on Android

Here’s why Facebook developed a new tool to help it animate Chat Heads and Cover Feeds on Android

Have you ever wondered how Facebook managed to implement certain animations on its Android apps? What makes Cover Feeds work? How easy was it to get Chat Heads to animate as it does? It turns out it wasn’t as simple as you might think — there were technical limitations with the existing animation frameworks. Thus, the social networking company (once again) developed its own means, called Rebound and, like in the spirit of Silicon Valley, has open sourced it for others to use.

Today, Facebook software engineer Will Bailey shed some light on the background behind Rebound and its impact to date.

Prior to its announcement in October at Facebook’s [email protected] conference, designers at the company resigned themselves to using several tools to help them get apps and features to look how they wanted. One of them was Quartz Composer, a node-based visual programming language that emerged from the Xcode development environment in Mac OS X. Facebook sought to apply as much physics as possible to make its animations work as fluidly as possible. And while Quartz Composer allowed that to happen in the prototyping phase, the real challenge was when it moved to production.

Bailey says the Facebook engineering team looked at existing capabilities within the Android SDK, but were limited in scope:

Since the animations mocked-up in Quartz Composer were developed on a physics simulation, we decided that we should explore using a similar technique to implement these animations in Android. With a physics simulation we believed integrating velocity, friction, and spring forces to govern the movement of Chat Heads or Cover Feed pages would be much simpler and cleaner.

The company embarked on a quest to find something “simple, lightweight, and well-suited to the task” of animating these elements based on physics rules and spring forces. The result became the creation of Rebound.

You can read more about the Rebound experience here. If you’re looking to try it out, it’s available on Facebook’s GitHub page as part of the Java library that can be easily integrated into your Android apps or also for your HTML5 and NodeJS tools (it’s been ported over to JavaScript).

Photo credit: Justin Sullivan/Getty Images

Also tagged with

Back to top