Get a quote

The Schurman Way To Up Your Performance While Curbing The Bodymovin Sizes

Published on November 30, 2023

In any medium of work, everyone looks for efficiency in their respective field. Animation is no different. At Animoox, we’re always looking for ways to make our process more efficient. As we kept on researching with the objective of work efficiency, we’ve across some helpful suggestions from Aaron Schurman, an awesome designer working full time at big giants like Google, Apple, and YouTube. Here’s what he has to say regarding performance boost up and getting small-scaled JSONs on export.

the Mess of Your Shape Layers & Tidy Up Their Content

Importing intricate illustrated components into After Effects through either direct import or Overlord can result in two hideous scenarios. You would either have one Shape Layer with an inconvenient amount of sublayers in the content section or a bazillion amount of Shape Layers. Either of them would be a drawback to your workflow.

To ensure a smoother animation process and avoid unnecessary clutter in your final JSON output, organizing layers is key. This involves decluttering irrelevant data like ‘Groups’, ‘Fill’, ‘Stroke’, and ‘Merge Path’, which are default components of sublayers. While it might add extra production time initially, this organized approach saves valuable time during animation. This meticulous layer management streamlines your workflow, offering seamless navigation through the file.

The JSONs that are exported from Bodymovin will include data for all these layer and parameter references, and they can really add up over time when working with complicated compositions.

Firstly, you name every layer and its respective sublayers. This may appear generic but it helps you list out the files and not be lost when you’re working with a multitude of layers.

Secondly, try grouping items based on their concept of animation. For instance, grouping components like ‘Fingers’, ‘Ring’, ‘Palm lines’ under one layer titled ‘Hands’ allow you to easily change the anchor point and adjust the position/rotation/etc of the layer. This in turn makes the sublayers included with the parent transforms.

Additionally, consolidating sublayers under a single parent layer provides access to keyframing parameters within the ‘Transform’ properties of that layer. Unlike the ‘Transform’ properties of shape sublayers, the parent layer offers more robust editing tools, including options to modify curves and separate X and Y dimensions in position settings. This approach unlocks more powerful functionalities for smoother animation adjustments.

When using Bodymovin, JSON files store all layers and their associated parameters. Lengthy layer names or numerous ‘Fill 1’ or ‘Stroke 1’ parameters can significantly inflate export data. A solution to this problem involves organizing elements into groups that share common fills or strokes. This approach helps streamline the JSON file, reducing unnecessary data and optimizing export sizes.

For example, you can put 3 paths under ‘Head Stripes’ that share the same ‘Stroke 1’ and ‘Fill 1’. This lets you cut out 2 references to a ‘Stroke 1’and 2 references to a ‘Fill 1’. Sure, this may not appear as if there isn’t much data but an animation that has over 100 layers, they catch up pretty fast.
Optimizing your layers is crucial to prevent JSON file inflation during export. Layers with vague names like ‘Fill 1’ or excessively long labels contribute to this ballooning. By strategically organizing and naming your layers, you can trim unnecessary data, ensuring your JSON files remain manageable in size.

Cutting Out Those Sneaky Layers & Shapes That Hide In The Corner

In the old days of Bodymovin, it was a novice when it came to exporting and creating the JSON. During this particular phase, it added data from hidden layers or hidden sublayers. Although this is quite an unforgivable error, we can still forgive ol’ Bodymovin here considering the fact that it was at its early stage. 

By time, it grew and discarded all its nasty habits. It was updated to dismiss all those hidden layers unless or otherwise, it’s mentioned in the settings icon that appears within the Bodymovin export window.
Before finalizing your export, it’s wise to double-check for any hidden layers or sublayers that might inadvertently add extra data to your final output. This precaution ensures a clean and streamlined export without any unnecessary or hidden elements.

Don’t Make Your JSON Bloated With More Points in Your Paths

As you delve into crafting more intricate illustrations, understanding how Bodymovin handles shapes is crucial. When creating a vector shape, Bodymovin utilizes code to arrange points on a grid, using defined arcs, lines, and shapes to construct the visual. This process ends with code specifying the fills and strokes for each element. As the number of coded points increases, the complexity of the illustration grows. More coded points, arcs, or lines contribute to larger illustrations, resulting in sizable JSON files.

Again, Don’t Make Your JSON Bloated With More Keyframes in Your Timeline

Throughout the animation process, employing numerous keyframes leads to a substantial JSON export. Essentially, data is generated for every utilized keyframe on a layer. While seemingly obvious, it’s crucial to grasp the impact. When animating numerous properties and retaining unchanged keyframes on parameters, it generates excessive data that inflates the final JSON file. The key is to (ironically) remove surplus, unused keyframes to prevent their compilation in the final export.

Let Go of Redundant Keyframes on Trimmed Layers. Let It Go…

Bodymovin currently lacks a feature to remove surplus keyframes located beyond the trimmed layer boundary. Consider a scenario where a layer, with intricate keyframing, is duplicated six times and trimmed differently. This situation, where the Z position alternates above and below another layer across the composition, complicates matters. Subsequently, when rendering the final JSON, the file size grows due to the animation setup

The larger file size issue arises because Bodymovin exports all keyframes, even those quietly existing outside the start and end points of a layer without any purpose. This duplication occurs when animation data, meant for multiple layers, gets replicated several times, causing an unnecessary loop of complexity.

The ultimate solution is to delete all the keyframes in a layer that leads to no actual impact. However, it must be reminded that only and only the ineffective keyframes must be deleted. Random deletion won’t quite work because there are keyframes that do impact the entire animation process. Deleting them would result in trims losing their harmony on the layer. Furthermore, it’s advisable to have an untouched hidden layer to have a backup when accidentally, the wrong keyframes are deleted. Animation is fun but it’s time-consuming to go back to ground zero.

It’s Not The End Yet…

To conclude, the issues involving Lottie and Bodymovin are abundant. Some of them are much more elaborated and it’s best to leave them for our next blog posts. But for now, we hope this article would come in handy to keep your animation game up while keeping Bodymoving JSON sizes down.