[bodymovin anim_id=”1205″ loop=”true” height=”202″ align=”center”]
What is a JSON animation?
A JSON-based animation file format 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 losing quality ( without pixilation ).
JSON format (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.
JSON v/s GIF animation
When it comes to true representation of the colour of your graphics, JSON files suffer no loss in quality from compression. GIF files often use archaic means of compression (like dithering) to reduce the number of colours required to reproduce your graphics.
You can see that when layered upon a background colour, the GIF has a a slight grainy edge to it. This is due to it only supporting a binary alpha channel. GIF pixels are either see-through or opaque. The result is that they often have a scruffy edge to them. This can be particularly pronounced when placed over photos on apps like Instagram.
Simply put, GIF files are raster files relying on pixels and frames for their animation. JSON files are created using vectors which allow for infinite scalability and frame rates. While zooming in on GIF graphics will cause them to break up and appear very pixelated, JSON files appear smooth at any size and at any speed.