Published on December 3, 2023
Bodymovin and Lottie both provide basic support to the Merge Paths effect that exists within Shape Layers in After Effects. Merge Paths happen to be a very crucial aspect of several workflows that use vector assets. In After Effects, Merge Paths functionality is required to penetrate through the center of the letter ‘O’; so that the center of the letter becomes more apparent when it’s put on top of other elements, colors, or backgrounds. And now that we’ve arrived at the last bit of Aaron Schurman’s last piece of suggestions to keep Bodymovin JSON sizes down and performance up, we’re going to discuss some essential tips and tricks provided by him to use within After Effects that will provide exported JSONs with equivalent functionality. Gradually, you may even rely more on Merge Paths
When dealing with varied strokes in a project, a helpful technique involves layering multiple paths within your shape layer. This approach allows easy modifications to achieve the desired effect without the complexity of managing compound paths. When it comes to animating assets for mobile platforms, using paths with applied strokes stands out as a straightforward method. Despite potentially having fewer points depending on the scene’s complexity, these paths offer greater convenience for animation and control. This method also eliminates the need to handle the intricacies of animating both inside and outside points within a compound path.
For intricate compound shapes in projects, Mr. Schurman offers helpful advice for handling them in After Effects. He suggests techniques like stacking paths, leveraging path directions, and utilizing the ‘Fill Rule’ to carve out one object from another. Whether you’re creating paths in After Effects or Illustrator, both software monitor the path’s creation direction—clockwise or counterclockwise. Maintaining consistency in path directions is crucial for seamless rendering of compound shapes.
Let’s explore a scenario where we emphasize a few key components. In the first emphasis, we stack two paths within the same group, incorporating their fill and stroke. In the second emphasis, we draw attention to the path direction icons positioned on the right.
Grouping all involved paths within the same layer group is key to constructing compound paths that render accurately. This method ensures After Effects and Bodymovin/Lottie understand the paths that converge to create the compound shape. The order of paths—whether on top or bottom—matters less than the direction in which the paths were created, which determines their behavior.
Understanding path direction often comes through trial and error. For instance, consider creating the word ‘COMPOUND’ in Illustrator using a font. Converting it to outlines and then exporting to After Effects using the Overlord plugin may reveal an interesting situation. If the font was constructed using paths that were already reversed, think about the letter ‘O’: one path might have been made clockwise, while the other followed a counterclockwise direction.
It can get confusing when looking at the highlighted path direction buttons. Following After Effects’ indications might suggest that both paths are created in the same direction, as highlighted by the buttons. However, trusting After Effects entirely might lead to misconceptions. In an ideal user interface, animators would expect paths brought together in After Effects to align seamlessly. Unfortunately, such a flawless UI world hasn’t materialized yet.
When combining two paths in AE, a bit of trial and error helps achieve the ideal display of a compound path. Experimenting with two already reversed paths might initially show an ‘incorrect’ setup that surprisingly delivers the desired outcome. Conversely, bringing together two paths moving in the same direction shows a ‘correct’ setup for path direction. After Effects showcases the compound path correctly when the path direction buttons are adjusted accurately while changing the direction of either path. A flawless demonstration of the compound path in AE ensures smooth export for both Bodymovin and Lottie.
As with any craft, animation is an ongoing learning journey, evolving every day with new discoveries. While we conclude Aaron Schurman’s insightful tips and suggestions, it’s not the end. Perhaps, in the near future, he’ll offer more guidance, and as we apply his advice, we may even develop our own strategies. That would be pretty exciting! Let’s wrap up this series by extending our gratitude to Mr. Schurman for his selfless help to animators everywhere. The world of animation may not be flawless, but it’s home to some truly exceptional talents, with Mr. Schurman being among them!
