Published on December 1, 2023
In our previous blog post, we discussed some of Aaron Schurman’s tips and suggestions on keeping the Bodymovin JSON sizes down and the performance of the animation up. But turns out, the full-time designer has a lot to say regarding this matter. Due to the density of his suggestions, we couldn’t cover the entire part in our last blog post. So, here are more insights from Mr. Schurman.
As discussed in our earlier blog post, we mentioned a lot of ways of how Bodymovin JSONs can get bloated. Another aspect that must be mentioned is how After Effects displays the data in keyframes in various manners. When a layer is animated with the focus on core level procedural transform properties such as opacity, position, rotation, scale, and miscellaneous, a reasonable amount of data is used.
Individually they may not take up much space but when you export this same file in a huge quantity and that too, for a 60fps workflow, then there is bad news for you – the data would add up like molds growing on walls. Now, compare this to a particular workflow, where a lot of paths in the shape layers are animated. There will be an accumulation of data. Here’s why – the paths that are composed of shape layers consist of a significant number of points. All these points have represented a piece of data plotting its location on a grid.
Animating an illustration’s path data isn’t just about altering basic X and Y positions. It involves tweaking every single point and the corresponding bezier handles tethered to each point within the path. That might sound like a lot of ‘every,’ but it paints a clear picture of how much your file can bloat. Consequently, you’ll notice a significant increase in the final JSON file size.
