How Facebook’s Recently Open-Sourced Rebound Was Used In Chat Heads

ChatHeadsReboundFacebook announced at its Mobile@Scale event in October that it would open-source a spring dynamics animation library for Android, Rebound, which allows developers to animate user interface elements based on the rules of physics and spring forces. Software Engineer Will Bailey offered more details on Rebound in a post on the social network’s engineering blog.

Bailey described how Rebound was used in the Chat Heads feature of its Facebook Messenger applications:

Designers at Facebook work with a tool called Quartz Composer to build rich interactive prototypes before engineering work begins. Quartz Composer is a node-based visual programming language provided as part of the Xcode development environment in Mac OS X, and it is used for processing and rendering graphical data. Quartz Composer includes a simple physics system that allows you to create physics-driven animation prototypes. For example, the Chat Heads feature of Facebook Messenger allows the user to drag friends’ profile photos, representing ongoing conversations, around the screen. Flinging a stack of Chat Heads causes the stack to attract toward the edge of the screen and eventually come to rest after expending the energy of the fling. This is achieved by applying a spring force to the Chat Head stack, which pulls it to the target point on the edge of the screen and integrates the velocity imparted by the user’s initial fling gesture.

Other examples of physics-driven animations can be seen in Facebook Home, including flinging through pages in Cover Feed, the bouncing “double-tap-to-like” indicator, or swiping your profile picture to unlock your phone. All of these interactions were initially prototyped in Quartz Composer based on its simple physics engine.

Bailey also wrote about understanding spring forces and evaluating existing animation frameworks, as well as providing a brief guide on how to use Rebound.

Readers: Are you surprised that Facebook open-sourced Rebound?

Related Stories
Mediabistro Course

Content Marketing 101

Content Marketing 101Get hands-on content marketing training in our brand new boot camp, Content Marketing 101! Starting September 8, digital marketing and content experts will teach you the tips and tricks for creating, distributing and measuring the success of your brand's content. Sign up before August 15 and get $50 OFF registration. Register now!