How to Export Animations from After Effects to JSON code

The lines between design, motion, and even development continue to merge. As tools for these industries become more streamlined and advanced, there are new and exciting features that are allowing creatives to to cross over into other industries that they may have been hesitant to a few years ago. One exciting realm that is starting to expand is the realm of motion design and development. Let’s dig into this exciting space and see what's brewing and take a look at a few tools you'll need to get started in sending After Effects projects to code.

Tools Needed to Send After Effects Projects to JSON Code

The first tool we need, besides After Effects of course, is available from aescripts called Bodymovin. Bodymovin will export out our animations as .json files (more on this later), turning them into a file that plays our animation back.

The next tool we need is Lottie, which we can use to preview our files. Fun note: Lottie has a very active community for sharing files. When you export out of After Effects, using Bodymovin, you can actually drag your file onto this Lottie for testing to see how things are working and if there are any issues with your file. You can check it out for yourself on Lottie's site!  

Once we have Bodymovin installed and have our testing site/app, we can start to explore what we can do!

What is JSON?

If you want to know technically what JSON is, it stands for JavaScript Object Notation. Here is a sample of what the file exported looks like. Good thing we don't need to edit it.

According to W3 schools, “When exchanging data between a browser and a server, the data can only be text. JSON is text, and we can convert any JavaScript object into JSON, and send JSON to the server. We can also convert any JSON received from the server into JavaScript objects. This way we can work with the data as JavaScript objects, with no complicated parsing and translations.”

If you want the non-technical answer, JSON is a file format that makes our animations play back without having to render out an MOV, and keeps our animations scaleable and light on size for playback on web.

WHEN WOULD I WORK WITH JSON FILES?

You may be asking yourself, why would I want to do this? Code is a dark art that must be locked in a box away from After Effects. However, Look at some of these fun and exciting examples!  This space is going to continue to grow, and things like apps, websites, and more need to have personality and character injected into them to reflect the brand.

School of Motion also used this Bodymovin' workflow when we decided to give animated life to our user experience. Here's the animation in-action.

This workflow is super diverse and the potential use-cases are vast.

For example, you type in an incorrect password to a site. How does this get conveyed through motion? Keep your audience in mind, an incorrect password on a site dealing with photos or social media should feel differently than if you type in an incorrect password on a medical portal where you are communicating with your doctor.

WHAT PROJECTS WOULD YOU USE THIS ON?

There is a wide range of possibilities. Anything from a logo on a webpage to full on page animations! Imagine what you could do on a full 404 page or even a team or contact page? Lot’s of potential for some quirky animations. Small icons or buttons and transitions, these are all areas that we can further enhance the character of the app or site and that’s just the tip of the iceberg. Using motion to reenforce emotions during interactions with these apps and sites, will make for a more engaging experience.

Collaborating with a developer could lead to some interesting results too. What possibilities are there for hover state animations or animations that are cued when the viewer clicks on an element or button?

Even infographics are looking for ways to become animated. “Gifographics” have been around, but this route is limited by file sizes, 256 colors and length of time. With JSON, there is no restrictions on file sizes so we can go beyond the standard simple loops of a gifographic and explore more robust and immersive solutions.

ARE THERE ANY PROBLEMS WITH THIS WORKFLOW?

There are some quirks to get used to in the process of working with these tools. Things like textures and some effects are not useable or can make things run very slowly. At the time of writing this, your animation needs to be in one composition and elements need to be shape layers. AI files need to be converted or they will be exported as images, contributing to making things run slowly. Since things need to be on shape layers, managing your layer structure is vital, depending on the size of a project you are working on.

These are just some of the quirks to this workflow, but some experimentation and collaboration will help you start developing a process that works for you and what you hope to achieve.

LEARN MORE

You can learn more about Lottie and Bodymovin on Airbnb's site. This is an incredible new opportunity for creatives with After Effects experience to expand their skills and tap into a new industry.

If you want to see how Zak Tietjen used Bodymovin to create a fun UX experience for School of Motion's online course portal, check out the case study on his site!

‍