Here is a JSON animation I made for my ‘CONTACT-US’ page on this website. The animation appears as a looping GIF animation but with a clean transparent background. You will notice that you can NOT download the picture if you right-click on it to save it on your computer.
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 animations I made with Adobe After Effects and rendered with Bodymovin to make them JSON files. Websites and mobile applications are a great place to deploy and use these specific type of animations. These can be used as loading animations, interactive elements, buttons and other UI/UX elements.
Here is a Json animation I made to show how I change tedious and boring figures and datas into amazing infographics with cute icons.
Simply put, JSON files are created using vectors which allow for infinite scalability and frame rates. While zooming in, JSON files appear smooth at any size and at any speed.