Lottie to GIF
Making the most of Decred’s Open Source Animation library on LottieFiles.
Decred has a comprehensive library of vector animations available on Lottie Files. Although it’s the broad ambition that Lottie will be adopted as the default way to parse animation data in Decred’s experiences there may be some instances where GIFs are still required over their vector counterparts.
I have put this guide together to inform the best practice of contractors hoping to use Decred’s rich animation library within the many different Decred expereinces currently available or under development.
Although it is not my intention or preference, this guide does use several third party websites of which have no affiliation to Decred Project or myself. Proceed with caution and follow at your own risk.
What is a Lottie?
A Lottie is a JSON-based animation file format that enables designers to ship animations on any platform as easily as shipping static assets. They are small files that work on any device and can scale up or down without pixelation.
What are the limitations of GIF?
CPU Intensive: Many GIF’s being parsed on the same screen can be quite intensive on CPU resources which can be problematic for systems with relatively limited resource.
Color: GIFs can only support 256 different colors in a single composition. Ultimately this means that there can be incredibly hard contrasts and issues concerning antialiasing. GIFs rely on a process called Dithering to create softer graduation between color values which, in-turn can have it’s own issues that are covered later in this guide.
In computer graphics, antialiasing is a software technique for diminishing jaggies — stairstep-like lines that should be smooth.
Transparency: There are only two values that matter concerning transparencies in GIF images: 0 and 1. In an image format such a PNG the image supports an alpha channel which means that antialiasing is a possibility. This is not the case with GIF and areas of the image can either be opaque or transparent.
GIFs with transparency is possible but it often produces undesirable results with very poor “Jaggy” edges due to the lack of antialiasing.
Obviously, this is a great simplification of the limitation, but in this case, these are the limitations that best inform the actions of this guide in reference to implementing animation in Decred’s applications.
Background: On the basis of the limitations of the file format I would recommend preserving the opaque background element and matching the background of the GIF to the destination’s background. Although this can be a slight inconvenience it is the best way of preserving the form and color properties of the original animation.
Enough background information. How do we put this into practice?
Here you can make minor amendments to the animation. If all that is required is a change of background, this can be facilitated using the Background Color options outlined.
If everything is required at this point then Convert to GIF can be used to output the animation into a GIF.
But what if there is a requirement for a new color scheme for a dark mode (for example)? In this case, we’ll have to use Edit Layer Colour which will allow the colors of each vector layer in the animation to be changed.
Edit Layer Colors:
In this interface, you can not only change the Background Color of the composition but you can also change the value of individual layers (coated on the left).
Most of Decred’s illustrations consist of a 3 color scheme meaning that lots of time can be saved by using changes Group Colors swatches to the right of the interface.
I would not recommend touching the Animation Parameters unless absolutely necessary or otherwise outlined.
When you are happy with the new scheme you can Export AE Lottie JSON file and re-upload this to Lottie on a private account and follow the consecutive steps.
Convert to GIF:
Lottie has a very simple application for generating GIFs from Lotties. This frustratingly currently supports a few limited choices with no option for custom resolution outputs.
At this point I would recommend downloading the resolution closest to the target resolution required. Remember to keep the browser tab open whilst this process is in progress.
Now that there is an output from Lottie there are two further requirements: Resize and Compress.
If you are having trouble here t’s worth downloading the JSON of the Lottie you wish to convert and navigating to the Lottie to GIF tool: LottieFiles — Free animation files built for Lottie
Drag and drop the JSON to the tool and this should resolve issues present upon conversion.
Red Ketchup:
Red Ketchup is a simple web-based image resizer. You can use it to resize the output from Lottie to a more suitable resolution with relevant ease.
Compress or Die:
The final stage is compression. Compress or Die allows some flexibility over the process and provided a good output in tests using the settings outlined.
It is worth noting that GIFs can also be resized by Compress or Die which can eliminate a step with some very simple math.
Dithering: Lossy settings have been left untouched here due to their tendency to produce messy discolouration which would be incredibly visible within the user interface.
Creative Freedom: Obviously feel free to deviate from this guide. If you find any “winning combo” of settings that take the file size down further feel free to get in touch.
Have fun creating fun, visual Decred experiences. If you have any further questions feel free to reach out to Kyle in the Matrix/IRC.
