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.
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.
Don’t Make Your JSON Bloated With More Points in Your Paths
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.
