How Lottie made our animation handoffs a lot simpler

Our brand refresh last December ushered in a completely new set of colours, illustration guidelines, and a brand new fully animated logo. The re-design captured Synthesis’ human-centred approach to data science, as represented by the animated logo combining an organic, handwriting-like typeface with a more geometric font.

This article explains our process of choosing Lottie for displaying our logo and other illustrations, and how we eventually used it on the site.

We considered a few obvious solutions for displaying our new animated logo.

First, we could use a gif to represent the entire animation, which we could then load as an image on our website.

However, a gif is a rasterised image, meaning it loses quality as you blow up the resolution of display. This would make displaying a gif difficult at the different resolutions and screen sizes that our website supports.

The second idea was at the other end of the spectrum. What if we wrote a full, custom animation in SVG? HTML supports SVG (Scalable Vector Graphics) layouts that, as a vector form of image representation, would not lose quality at different scales. However, this would be incredibly tedious and require lots of code to manually interpolate between all the different states of the animation.

Related posts:

AI and machine learning are the same thing (machine learning creates AI), but ‘artificial intelligence’ is a huge overstatement of what machines can achieve. There is nothing ‘intelligent’ about…

The first step is the hardest. Could it be because there’s no more land beneath your feet after that first step? The dog is barking with urgency, while your heart is beating with passion, and your…

Painting laminate cupboards is a great way to update the look of your home without spending a fortune. However, you need to be aware of some key considerations before starting your paint job…