[caption id="attachment_138440" align="aligncenter" width="736"] Facebook Emoji[/caption] When Facebook redesigned the ‘Like’ button to reflect a variety of moods, many were smitten with the tiny animated emoji. To help bring that functionality to more of the world, Facebook has outsourced its emoji animation library. Dubbed Keyframes, Facebook started the project with three tenets: quality, file size and resizability. It wants your animations and emoji to scale across platforms and screen sizes without occupying too much space in your codebase. Emoji animate at 60 frames per second, but that’s not where the magic happens. Because animation typically requires reading multiple files in succession, space is a concern. As Facebook puts it: “Reading each of the files from disk into memory would be time consuming, while holding the files in memory would take up space on the device. However, we didn’t want to compress the images, since that would degrade their quality.” To keep the quality of an emoji and its animation, Keyframes uses a clever parsing method for JSON data. It only takes what’s necessary for an animation, and respects that you’re animating layers, not entire files; that’s part of the reason using PNG or SVG doesn’t work. Facebook also split Keyframes model objects into three distinct types: images, animations and features. An image file holds information on animation playback speed and scaling. Features are a bit more robust; they have actual animation properties, and information on what a property should look like at various stages of an animation. They’re also independent of an image, and can also belong to a larger animation group. Animations hold values for transitions between features, tying the entire process together. In the emoji face GIF above, you can see how it moves at different speeds throughout its cycle. Animation properties allow it to do that; it can shuffle between features at various speeds, allowing for a bit of depth to the animated GIF. If there’s a caveat, it’s that Keyframes relies on Adobe After Effects. It uses an ExtendScript to grab animation data from After Effects, then applies it to rendering libraries for iOS or Android. Happily, Facebook uses core mobile technologies (Core Animation for iOS and the ‘Paths and Matrices’ in the graphics library for Android) to keep things approachable. Several teams inside Facebook are using Keystrokes, but the company wants to draw feedback from developers and designers outside its walls. Facebook says it’s also exploring use cases beyond smiling emojis and throbbing hearts, noting: “A few teams have explored other usages of Keyframes, including driving particle effects or leveraging the fine-grained control we have over the animation’s playback. As we use the library and learn what designers want out of a tool like this, we also hope to expand on the different tools and capabilities of After Effects supported by the Keyframes library.” If you want to contribute or take advantage of Keyframes, check out the GitHub repo.