JSON v/s GIF animation
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.
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.