Telegram Animated Stickers Are Not GIF’s: Origin From Lottie

By  | 

Telegram launches a new version and does so with a peculiar feature: animated stickers. It’s not the first one to include them, although it is probably the best one to do so since they are extremely soft animations -of up to 60 frames per second- and that occupies very little space.

Vectors Instead Of Pixels

Behind these stickers is the TGS format, capable of generating animations more fluid than a GIF but occupying much less size, in what Telegram calls a mixture of vector graphics, packaging methods, and forbidden magic. The Telegram stickers are based on Lottie, a library of animations created by the Airbnb design department that generates JSON files that can be integrated and reproduced in web pages and Android and iOS applications.

The GIF files are based on bitmaps that use different techniques to save space when making calculations for reuse information- the result can be a sizable file. And, the more frames and more quality the animation has, the more it will occupy.

The animations of Lottie, on the other hand, are vector. In a rough way, instead of keeping information of each pixel, the information is saved to generate the form and its animation. If it’s a simple design – and usually the stickers are usually – the result is a much smaller file than a GIF file.

Lottie is a library that allows exporting animations created in Adobe After Effects through its own plugin: Bodymovin. This plugin generates a JSON file, which is basically a text document that contains all the information to generate the image and its animation. Like a text document that is, its size can increase rapidly if it is a complex animation, long or with many elements, occupying around 100 KB.

So, it is not much-forbidden magic behind the animated stickers of Telegram, but open source libraries, with a little twist to adapt them better to the application. It’s not magic, it’s all computer science.

Leave a Reply

Your email address will not be published. Required fields are marked *