Here is a JSON animation I made for my homepage. The animation appears as a looping GIF animation but with a clean transparent background.( the white background is the page )
JSON animation supports full background transparency. You can see that no matter what color the background of your site is, the JSON animation will overlay on top without the clunky borders.
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.
Here below are some JSON animations I made to illustrate specific pages on this website. Websites and mobile applications are a great place to deploy and utilize these specific type of animations. These can be used as loading animations, interactive elements, buttons and other UI/UX elements.
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.