Animated Web Graphics
I think most of us, at some point or other, have come across animated graphics on the web. The Graphics Interchange Format, or GIF format, has been around for as long as I have been using computers, since Windows 98. The GIF format (pronounced JIF) stores multiple images as frames, a bit like a flipbook, along with transparent pixels (just like PNG formats). But the main drawback is that GIF files are large in size due to the large number of frames stored. Graphic designers have been known to do clever optimisations such as reducing the image canvas size, reducing the number of colours or reducing the number of frames. All of which reduce the quality of the final image.
(This GIF meme is 1.9MB in size.)
Lottie Files
Lottie files originated from Hernan Torrisi in 2015, who developed a plugin for Adobe After Effects that allows animated vector information to be stored in a JSON file format. Lottie is essentially a type of player that renders these JSON files in a web browser for viewing. While GIF files and other image formats work natively on virtually all digital devices, Lottie files require an embedded player though.
You’ve undoubtedly seen Lottie files in action, for example on Duolingo, Headspace or DisneyNOW.
Lottie files offer many benefits; for example, you can scale them indefinitely because they are vector-based. You can also tweak the colours of vector objects, allowing users to change the branding or colours after a Lottie file has been published. Additionally, they look amazing at 60fps. A useful way to conceptualise Lottie files is to view them as animated Scalable Vector Graphics (SVGs). Take a look for yourself at these examples:
How to try it for yourself?
You can give this a go by visiting ‘Lottie Files’. It provides many Lottie animations, some free but mostly paid. All the examples you see above are all from the same website under their free animations. You need to add an animation to your account, you can then tweak the colours of the graphic which is really useful, and then you have various options for how to publish it on your target platform. The best way is to embed the Lottie player on your website using the scripts they provided; that’s how the examples above are done. You can also get an iFrame code, which is easier to integrate on websites, but limits some control; for example, you won’t be able to change playback speed or looping (notice all three examples above are looping). Alternatively, you can even download them in MP4 or GIF format.
I hope you’ve found this article insightful, as a fan of different digital media, these are very new to me, and I am going to have a go at creating some Lottie files using a combination of Illustrator, After Effects and the Lottie Files website.
