How to Use After Effects to Create JavaScript Web and App Animations
Part I — The Foundation
Animating components is a crucial step in the website design and development process. They help guide users through your app or website and provide positive and negative feedback along the way — and who are we kidding, they just look cool.
That being said, animations can be difficult to convey to clients and time-consuming to write and finesse in CSS and/or JavaScript.
Luckily, some brilliant people created a plugin for After Effects called Bodymovin that allows you to export animations as JavaScript and share those with your development team to implement in your products.
With a little bit of practice in After Effects (AE), you can create simple and engaging animations that will bring your products to the next level.
Like any product work, you’ll want to schedule time in your sprints to draft, approve, and deliver content to your developer(s) so they can execute the animations in a timely fashion.
But before you dive in and start going crazy with AE animations, I’d like to share some lessons learned to help you start off on the right foot.
Project Folder Structure
First things first — get organized. It’s important to keep a clean folder structure for your animations prior to animating. Re-linking assets can be a pain in the asset, especially when you have a lot of them.
I suggest creating separate exports folders for video and code. The videos folder is optional, but I’ve found it’s easier to share videos/gifs back and forth internally and with clients. The code folder will hold the .json files and additional assets (if necessary) to deliver to your development team.
When you create a new AE file, save it to this folder immediately so it has a place to auto-save.
What to include in your assets folder:
- Reference images so you can re-create components in After Effects
- Adobe Illustrator vectors and project files
- PNG images if absolutely necessary (shape layers are always preferred — I’ll cover this later)
Comps & Pre-Comps
If you’ve used After Effects before you’re likely familiar with Compositions. For designers, think of a Comp as an artboard and a Pre-Comp as a symbol.
In Sketch, export a section of your site as a png to use as a guide for your Main Comp. This full-screen view serves as a temporary way to view how the different components interact with each other. Each component within that screen, however, should have its own individual “pre-comp”.
A pre-comp is simply a nested composition within another composition. When you create a new comp in AE, the default size will be whatever the previous comp size was. The video below shows you how to create a Main comp, then the Side Menu pre-comp.
While this may seem cumbersome, it helps to do so ahead of time for each component because you’ll be exporting the pre-comps and delivering those to your development team to implement on web pages, while the Main comp simply serves as a reference.
Shape Layers in After Effects
The key to rendering high-quality animations with the Bodymovin plugin is making sure every AE layer is a “shape layer.”
Since Sketch files can get complicated, it’s best to work with smaller sections of your web pages at one time.
There’s a plugin for Sketch and After Effects called Sketch to AE that attempts to automatically convert your sketch assets to shape layers, but I’ve found it to be buggy and altogether overwhelming. Go one component at a time and recreate simple shapes in After Effects for the best results.
For complex layers like logos and characters that you create in Illustrator, there’s a great plugin called Overlord. This allows you to automatically send shape layers back and forth from AI to AE. It’s $50, but the time saved is well worth it.
If you need to animate individual layers within a character (like a walk cycle) suggest using this plugin, but if you’re animating simple properties like scale and position, you can import the Illustrator vector into AE and then convert the vector file to a shape layer. Right-click the layer in your timeline > create > convert vector to shape layer.
Anchor points
When you create a new shape layer in After Effects, no matter where you draw that shape, your anchor point will be in the middle of the canvas.
Be sure to orient your anchor points immediately after creating your shape layer. There’s nothing more annoying than building a bunch of layers and then having to go back and individually move each anchor point after the fact.
Use the Google machine to find an AE plugin for this process, or go analog and use the “y” key to bring up the Move Anchor Tool.
Effects
AE pros will be tempted to use all sorts of effects and expressions to speed up the animation process, but unfortunately, Bodymovin doesn’t support most of that functionality (yet).
You can, however, use anything under the “Add To” button. A popular effect, these days, is “Trim Paths.” This allows you to manipulate the start and end of a stroke. You can see how this would be particularly useful for a tracing or timer effect.
Eease
Ease is a key principle in animation. Mastering the AE ease controls will automatically boost your animation game to the next level.
Right-click a keyframe (or F9) to add ease to your animation. But don’t stop there. Be sure to use the Ease GUI (the little graph icon above the layers panel) to adjust the speed at which your animation takes place. If you don’t see the graph try clicking on different toggles until it shows up.
Those are the basics you need to get started with JavaScript animations using After Effects. Stay tuned for Part II where I’ll take you step by step through the Menu Animation to JSON export.
Comment below with some other tools you like to use for web animations.
