Lottie Animation Tips & Tool Recommendations

Published on December 15, 2023

When you’re starting out your motion design journey, you may end up taking extra hassle or remain simply clueless. To get you started, here are two essential tips from Motion designer David Probst Jr. and also a few tools recommended by him to get you all set.

Tip 1: Precomposing The Original Layer

If you need to create several instances of an animated layer, make an attempt to precompose the original layer at first. Afterward, you can easily make a duplicate of the precomp. A single set of keyframes then directs each individual instance of the precomp. This implies that there is less work for Lottie and produces a much smaller JSON file.

Otherwise, you would end up duplicating the layer but this would only increase the size of the JSON while rendering since all the keyframes also get duplicated. This becomes a huge mess especially when you have a big stack of duplicated layers.

Need to create multiple instances of an animated layer? You may be inclined to just duplicate the layer, but doing so would also duplicate all the keyframes, which increases the size of the JSON when you go to render. This really adds up if you have a big stack of duplicated layers!

Allow us to better explain this with a hypothetical scenario –

Say, for instance, you are animating the walk cycle of a character. Generally, each set of the character’s limbs would have the same animation but it would be just offset in time. It’s double work when you need to work the same thing on both limbs. To make things smoother, animate just one limb, precompose the layer, then make duplication of that precomp, and finally, offset the duplicated layer in time. For the final outcome, you get two animated legs for the price of animating just one. Likewise, you can do the same for the arms.

Tip 2:  Exploring Manual Path Animation

Exploring manual path animation allows you to create the illusion of depth without even diving full-on 3D. It does this with a minimal amount of elbow grease, which lets you “trace” a reference layer.

On the contrary, you do have the option to pick features like auto-trace. They are actually quite amazing when it comes to converting 3D renders into shape layers, which are Lottie-friendly. However, there is a certain drawback with using auto-trace. It piles up a ton of keyframes and the pathway is sort of a muddle itself. All in all, this bloats your file size.

So, considering all the pros and cons, it’s best to go with manual path animation.

Expert’s Recommendations

Like our earlier blog post, we dug into what experts like David have to say when it comes to tools. Turned out, there were a few tools that David recommended for starters.

They are all listed below –

• • AEUX – Recommended tool for transferring visual designs from Sketch and Figma into After Effects. Contains a number of useful import settings. And to put the cherry on top, it comes free.
    
  • Ray Dynamic Color – Makes use of expressions to connect all of your color values to a color palette. If there is any change to the palette, the associated layers in the project will get automatically updated.
    

• Overlord – Basically, this acts as a portal between After Effects and Illustrator. Between apps, you can push and pull layers back and forth with only the click of a button.
• Ease copy – Lets you copy the easing values from one set of keyframes to another.
• Lazy – Brings together layer sequencing and a simple graph editor. The combination lets you offset your layers and keyframes along the specified Bezier curve.

Now that you have a handful of information, hopefully, your animation and motion design experience will be a smoother one.