Part Three: THE BODY CAN BE FRAIL
Bodymovin is not a silver bullet. It’s software that’s actively in development and often takes some trial and error to get the desired result. Some functions simply won’t work. When reviewing a design prior to animation, being able to quickly triage design elements as things that will be best served as vectors or raster images becomes second nature. Raster-based effects, some expressions, video and audio files aren’t supported. But with proper planning and some clever thinking, we’ve been able to work around all of these limitations to create great results. Here is a list of some common limitations we run into, and how we work around them.
Gradients/Effects have very limited support. This can be the biggest roadblock when starting out. We’ve found the best solution to be rendering out necessary effects as static images. For a flickering neon sign, we simply had two version of the image, an on and an off variant, and quickly faded between them to simulate the fluctuating glow.
Expressions aren’t working as anticipated after export. While some expressions work as expected, those specific to After Effects aren’t. Check out the documentation for more information. A quick and easy solution we’ve found is the oft-overlooked method of converting expressions to keyframes. It can really get you out of a pickle.
Text is showing up in the wrong size/incorrectly. By default, the option to outline text before rendering to the JSON animation is on. This is useful, but can be time-consuming and if you have a block of text with different sizes, it will export it incorrectly. The fastest and most reliable way we’ve found to deal with text is to use the Create Shapes from Text command on each text layer before sending it through Bodymovin’.
I’ve got this great HTML file. Now what…? When it comes to final delivery, each ad network requires something a little different. It usually involves copying and pasting a line of code into the HTML file, and editing a parameter or two. Contact your vendor for the requirements.
As you can tell, this workflow is not a simple turnkey solution. There’s some trial and error. But putting in the time to learn this new skill set, with its strengths and weaknesses, can open up a world of delivering animations in an entirely new way, and open up a dearth of creative opportunities. Go forth, create, and be sure to share what you make with us, we can’t wait to see the great things you make!