Lottie Animation Designer
Looping JSON Animations

Browse around below for JSON animations (web and development-ready). Learn best practices, FAQs, uses and view examples. Need an animation? Get in touch using the form below. Enjoy!

JSON Lottie Animations

This rocket animation is an example preloader animation, ready for the web, iOS and Android.

Shown here is JSON, for the web. One of the major differences between JSON and GIF format is the file size and installation process.  This is just an example for WordPress but the same animation can be reformatted for video, GIF or social media. 

Here’s what to expect on this page:

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 in the screenshot 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.

JSON Animation using Lottie Format

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).

Does Lottie Have a Transparent Background?

YES! This is one of the benefits of JSON/Lottie animations over GIF format. While GIF is great for social media, emails and more, JSON animations help create utilize faster loading time and take on the background color of the website or mobile application.

Can I Convert GIF to JSON/Lottie Format?

Yes and no. If you have the original vector file, Adobe Illustrator, you can actually reformat the animation process in Adobe After Effects and export to JSON format. There are stipulations in regards to whether or not the new JSON animation will convert nicely (Lottie has some file limitations) but ideally things should be smooth sailing. 

Not sure? Feel free to reach out and I’ll try and point you in the right direction.

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. 

Benefits of JSON Animations

Speed & Transparency. 

These two factors sum up the benefits of JSON vs. a GIF animation. JSON is about 100x smaller than a GIF and supports full background transparency. This means that no matter what color your background of your site is, the animation will overlay on top without the clunky borders. 

Mobile Applications

Mobile applications are a great place to deploy and utilize these specific type of interactive animations. These can be used as loading animations, interactive elements and buttons and other UI/UX elements. 

How To Add JSON Animations To WordPress Websites:

If you’re using WordPress (this site does for example) to build and convey your information, one of the best plugins I would recommend is called “WP Bodymovin.” While this isn’t a complete tutorial for how to use the Bodymovin plugin, below are the steps to upload to WordPress.

Step 1. Create Animation

Create and upload your SVG graphics to Adobe After Effects

Step 2. Export From After Effects

After you've created the animation your style and needs, export the animation from After Effects using the "WP Bodymovin" plugin for After Effects (not to be confused with the plugin for WordPress, same name).

Step 3. JSON Format

When you use the After Effects Bodymovin plugin, what's created is called JSON format. AFter Effects can export animations and motion graphics into a wide variety of formats (video, GIFs, etc.) but JSON is what we want here.

Step 4. Upload To WordPress

Now, you'll need the "WP Bodymovin" plugin for WordPress. Install to your wordpress site and follow the installation directions to upload your JSON data. The WordPress plugin then generates what's called "shortcode" that can be deployed in most areas of your WordPress website, blog posts, landing pages, homepage animations, etc.

Landing Page Animations

Seen here is an animation for a landing page. When paired with text and other supporting evidence, landing page animations help to expedite your message to all site visitors. 

Where To Get Lottie Animations

If you’re looking for JSON animations, there are many places to go. First and foremost, find a designer that can export the animations in JSON format, or a developer that can create animations. Some ideas to start could be a platform such as Upwork or other contractor sites. 

Alternatively, if you like some of the samples above and around the rest of the site here, feel free to get in touch and I would be glad to field some questions to begin. 

Questions or Comments Welcome

Have questions about how to go about getting a personal real estate agent? Need help building one? Start up a conversation by filling out the form here. I’ll try my best to answer your question or point you in the right direction.