Why is the lottie animation file size so large when exported from After Effects using bodymovin with a compression of 60, making it unsuitable for Webflow due to long loading times?

Large Lottie animation file sizes from After Effects despite compression settings can result from complex vector artwork, unnecessary assets, or inefficient animation techniques.

1. Lottie Compression Limitations

• Bodymovin’s compression setting (in the plugin) mainly affects precision of animation keyframes, not file size from images or shape complexity.
• Compression set to 60 may reduce some file weight, but won’t significantly optimize large vector data or embedded raster files.

2. Common Causes of Large File Size

• Excessive shape layer complexity: High detail in shape layers, masks, or strokes makes the exported JSON file large.
• Embedded images: PNGs, JPGs, or AI files embedded (instead of referencing or converting to vectors) will dramatically increase file size.
• Frame-by-frame animations or expressions: These can inflate file size as all frame data is stored instead of using keyframes efficiently.
• Gradient fills and filters: Complex fills or layer effects (like glows or blurs) often aren’t optimized well in Lottie exports.

3. Optimization Tips for Smaller Lottie Files

• Simplify artwork: Minimize use of masks, layers, and vector point density. Use simpler shapes.
• Convert images to external assets (optional but not compatible with Webflow – Webflow only accepts pure JSON).
• Avoid unsupported or unnecessary After Effects features: Lottie has limited effect support. Remove layers that won't translate well.
• Use motion paths over frame-by-frame animation: Reduce number of keyframes and bake expressions where needed.
• Use the “Trim Paths” or simple transforms rather than animating shape paths directly, which bloats file size.
• Split animation into smaller pieces: If appropriate, separate out sequences into multiple Lottie files.

4. Alternatives for Webflow

• Use SVG animation instead, if applicable. For simple animations, SVG+CSS or GSAP can be more performant.
• Compress Lottie JSON using tools like LottieFiles compressor before uploading to Webflow.
• Preview in Webflow before publishing to assess impact on load speed using smaller animation segments.

Summary

Lottie file sizes can be large when exported from After Effects if artwork is complex or includes non-optimized assets. Compression settings in Bodymovin offer limited savings. To use Lottie effectively in Webflow, simplify your animation layers, avoid raster graphics, and test performance on compressed versions.