Lottie Animations &
Interaction Designer

Browse around below for JSON animations (web and development-ready). Learn best practices, 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 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).

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 Format

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. 

WordPress and JSON Animations

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. 

Start a Conversation...

Looking for something similar or have questions about custom animations?. I’d be glad to chat further about your project or start something similar for you.