The first hurdle you need to overcome when working in UI Motion Design is finding time, budget, and the need to focus your Design time on inspiration. Because establishing workflows and learning new technologies can be a time-consuming process, some projects on tight budgets can’t afford it.
In this article, I’ll walk you through some powerful workflow efficiencies that will help you get smaller JSON when exporting and overcome possible performance hurdles.
Clean up your shape layers and organize their contents
When importing complex illustration elements into After Effects, either through Overlord or directly importing and converting Illustrator documents, you will either end up with a composite that has a lot of shape layers, Or a shape layer with an unmanageable number of sub-layers in its “Content” section. If these layers are left alone, then you run into major workflow problems that slow down the animation process and add unnecessary data to the final JSON output. Although this increases production time at the front end of the animation process, Organizing all layers properly and removing as many parameters as possible such as “Group” “Fill” “Stroke” “Merge Path” (which are part of the sublayers by default) will save you valuable time during the animation phase and allow you to navigate the file more easily. JSON exported from Bodymovin will include the data referenced by all of these layers and parameters, which can increase significantly over time, especially when dealing with complex compositions.
Let’s take an example:
When Kitten is imported into After Effects and starts animating, the file organization is different like this:
As you can see from the figure: First, I named each layer and its sub-layers. This may seem obvious, but some animators often omit this step to save time. The best practice should be to name as many as possible so you don’t waste time in your own files, especially when dealing with so many layers.
Second, I tried to group items according to my design of how to animate them. Combining “Helmet ‘” “Ear lines “” Snout” etc under a layer called “Head” allows me to change anchor points, adjust layer positions/rotations etc. By doing so all child layers will be included in the parent transform. More importantly, this grouping allows me to use keyframe parameters within the underlying “Transform” property of a layer, which has more powerful tools to edit curves and the ability to separate X and Y dimensions from position, rather than the “Transform” property of the shape sublayer.
This is Animation 101; There is no update here.
However, in Bodymovin, all layers and all their parameters are saved in JSON, so if you use layer names that are too long, this will affect the size of your exported data. If you do not group objects and have a large number of “Fill1” or “Stroke1” arguments, this will affect the size of the data you export. To compensate for this, grouping elements together so that they share these common Fills or Strokes can save a lot of data size in the final JSON.
In the image below, you’ll notice that I have 3 paths sharing the same “Stroke1” and “Fill1” under the “Head Stripes”.
By doing so, I removed two references to “Stroke 1”, two references to “Fill 1”, and any additional data that might be used to define in JSON. It doesn’t seem like that much data, but if you have an animation with 150 layers, it adds up pretty quickly.
More layers with redundant parameters (such as “Fill 1”) or excessively long layer names cause JSON to swell when exported, and taking the time to organize and name all the layers will help you reduce unnecessary data clutter that can lead to larger files.