I’ve been working on a simple dial animation in After Effects which basically entails a knob rotating clockwise. This part of the animation renders seamlessly to Lottie, but there’s a second part: I have a gradient stroke around the knob that wipes in with the movement of the knob. At first, I accomplished this using a radial wipe on the imported Illustrator artwork. I later found out Lottie does not support many effects, including radial wipe. So I tried another method: a stroke ellipse shape layer with trim path. That works, but the gradient does not (I achieved this with two strokes, one tapered, then a series of effects: blur, composite, and levels).
Anyone have any idea how to achieve a gradient along a path that Lottie will accept?
Thanks!
@Rebekah ,
Lottie doesn’t directly support radial wipes, but there’s a workaround you can try to achieve a similar effect with features Lottie understands.
She created a dial animation with a knob rotating in After Effects. The animation included a gradient stroke around the knob that revealed itself as the knob rotated (radial wipe effect). After Effects exports to Lottie, but Lottie doesn’t support radial wipes.
Rebekah tried using a stroke ellipse with a trim path animated to reveal the path as the knob rotates. This works for the wipe animation but not the gradient effect.
She also attempted using two strokes: one tapered and another with blur, composite, and levels effects to achieve the gradient. However, this method likely wouldn’t translate well to Lottie due to the unsupported effects.
[quote=“Rebekah dollartreecompass, post:1, topic:5662, full:true”]
I’ve been working on a simple dial animation in After Effects which basically entails a knob rotating clockwise. This part of the animation renders seamlessly to Lottie, but there’s a second part: I have a gradient stroke around the knob that wipes in with the movement of the knob. At first, I accomplished this using a radial wipe on the imported Illustrator artwork. I later found out Lottie does not support many effects, including radial wipe. So I tried another method: a stroke ellipse shape layer with trim path. That works, but the gradient does not (I achieved this with two strokes, one tapered, then a series of effects: blur, composite, and levels).
Anyone have any idea how to achieve a gradient along a path that Lottie will accept?
Thanks!
[/quote]
Hello, @Rebekah
There are a few workarounds you might consider:
Use a PNG Image: Create the gradient as an image file and use it as a mask over your animation. This method is supported by Lottie and can be a performant solution.
Separate Shapes with Gradient Fills: Instead of using strokes, create separate shapes with gradient fills and use Trim Paths to animate them. This can be more tedious but might achieve the desired effect.
Layer Blending Modes: Experiment with layer blending modes that might be supported by Lottie to create a gradient effect.
I hope this step is helpful for you.
Best Regard,
Angela Huey