Webflow sync, pageviews & more.
NEW

Is it possible to export a line drawing animation with the wiggle effect intact using Bodymovin in Adobe After Effects?

TL;DR
  • Convert wiggle() expressions to keyframes (Animation > Keyframe Assistant > Convert Expressions to Keyframes).
  • Use shape layers instead of stroke effects (Layer > Create > Create Shapes from Vector Layer).
  • Check animation compatibility in Bodymovin (Window > Extensions > Bodymovin > Demo).
  • Export as JSON and test in Lottie (e.g., LottieFiles Preview).

1. Understanding Bodymovin and the Wiggle Effect

The Bodymovin plugin for Adobe After Effects exports animations as JSON files for Lottie, but it has limitations, especially with expressions like wiggle(). Bodymovin does not directly support After Effects expressions, requiring an alternative approach.

2. Convert Wiggle Expression to Keyframes

Since Bodymovin does not support the wiggle() expression natively, you need to bake the animation into keyframes:

  • Select the animated property (e.g., Position, Opacity).
  • Go to Animation > Keyframe Assistant > Convert Expressions to Keyframes.
  • This will generate explicit keyframes that Bodymovin can properly export.

3. Use Shape Layers Instead of Stroke Effects

  • If you're using an animated path or stroke, make sure it's a shape layer rather than an effect-dependent stroke (e.g., using the Stroke effect on a solid).
  • Convert your design to a shape layer by selecting the layer and clicking Layer > Create > Create Shapes from Vector Layer.

4. Check Bodymovin Compatibility

  • Open the Bodymovin extension (Window > Extensions > Bodymovin).
  • Select your composition and click "Demo" to preview it.
  • If certain parts of the animation don’t render correctly, adjust them as needed (e.g., convert additional effects into keyframes).

5. Export and Test in Lottie

  • Export using Bodymovin and load the .json file in a Lottie player (such as LottieFiles Preview or a web-based Lottie viewer).
  • If necessary, tweak settings and re-export to ensure everything renders as expected.

Summary

To preserve the wiggle effect when exporting with Bodymovin, convert expressions into keyframes and use shape layers instead of stroke effects. Finally, preview the animation in Lottie to ensure compatibility before using it in production.

Rate this answer

Other Webflow Questions