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 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.
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!
Dive into real-time 3D with our Unreal Engine beginner's course by Jonathan Winbush. Master importing assets, world-building, animation, and cinematic sequences to create stunning 3D renders in no time! Perfect for motion designers ready to level up.Explore this Course ➔
Unlock the secrets of character design in this dynamic course! Explore shape language, anatomy rules, and motifs to craft animation-ready characters. Gain drawing tips, hacks, and Procreate mastery (or any drawing app). Ideal for artists seeking to elevate their craft.Explore this Course ➔
Elevate your freelance motion design career with our guide to client success. Master a repeatable method for finding, contacting, and landing clients. Learn to identify prospects, nurture leads, and develop a thriving freelance philosophy amidst chaos.Explore this Course ➔
Rev up your editing skills with After Effects! Learn to use it for everyday needs and craft dynamic templates (Mogrts) for smarter teamwork. You'll master creating animated graphics, removing unwanted elements, tracking graphics, and making customizable templates.Explore this Course ➔
Stand out with Demo Reel Dash! Learn to spotlight your best work and market your unique brand of magic. By the end, you'll have a brand new demo reel and a custom campaign to showcase yourself to an audience aligned with your career goals.Explore this Course ➔
Illuminate your 3D skills with Lights, Camera, Render! Dive deep into advanced Cinema 4D techniques with David Ariew. Master core cinematography skills, gain valuable assets, and learn tools and best practices to create stunning work that wows clients.Explore this Course ➔
Master After Effects at your own pace with Jake Bartlett's beginner course. Perfect for video editors, you'll learn to create stylish animated graphics, remove unwanted elements, and track graphics into shots. By the end, you'll be equipped for everyday AE needs and more.Explore this Course ➔
Revolutionize your Premiere workflow with customizable AE templates! Master creating dynamic Motion Graphics Templates (Mogrts) in After Effects to speed up your team's work. By the end, you'll craft easily-customizable templates for seamless use in Premiere Pro.Explore this Course ➔