What Are JSON Animations
Small File Size and Transparent Background
In a nutshell, JSON (stands for Java Script Object Notation) takes your images & animations and renders into a readable text based format. When rendered to JSON format your data looks like an odd robot language (to most). Here’s an example snippet of rendered JSON data below. But why use this format? First and foremost, filesize. JSON format is a fraction the size of a GIF and secondly it supports full transparency (meaning no background color and overlays on top of any app or website element). This can go a long way when developing interactive animations for any platform (your developer will be able to embed and use the animations as necessary but more on that later.
Once your file is ready, it’s easy for your developer to drag and drop the animation where necessary. This includes iOS, Android and React libraries. When uploaded, the animation appears as a looping GIF animation but with a clean transparent background.
If you don’t know what any of this means, don’t worry..you’re developer will 100% know (if they don’t they probably aren’t the right type of developer, yes there’s a large variety of developers).
Animation Creation Process
The animations on this page were created using Adobe Illustrator and Adobe After Effects. Next, they were uploaded to this website using the “Lottie” framework via the “WP Bodymovin” plugin for WordPress (more on this in the next section).
There are a few stipulations/constraints that go into the creation process but ask your designer/developer for the best practices. A good rule of thumb is to start with simple shapes and lines and build from there. Complex effects and styles may not be able to be rendered, remember this JSON text document holds all the information.
Installation Process: Lottie Framework
The Lottie framework, by AirBNB (yes that AirBNB), can then be used to import/export animations. Whether you are using Xcode, Swift, or another iOS development platform you can easily add in your JSON animation.