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?
TL;DR
- Simplify complex effects and convert them to vector shapes to avoid rasterized assets.
- Minimize path points and keyframes using simplify tools and optimized animation techniques.
- Remove embedded images and unused layers from export settings.
- Use online compression tools to reduce final JSON size before uploading to Webflow.
Large Lottie animation file sizes after exporting from After Effects with Bodymovin (even at 60% compression) often come from specific design and animation choices that don't translate efficiently into JSON. These issues can cause long load times in Webflow.
1. Review Use of Complex Effects
- Expressions, effects, and precomps can dramatically increase the Lottie file size.
- Lottie supports only a subset of After Effects features. Unsupported elements (e.g., blur, glow, gradients, or 3D layers) get rasterized or ignored, resulting in large vector paths or fallback image assets.
- Reduce or simplify these elements and try converting effects to native vector shapes.
2. Minimize Path Points and Keyframes
- Excessive path points (e.g., detailed vector artwork or hand-drawn shapes) lead to bloated JSON files.
- Use the simplify path tool in Illustrator/After Effects before importing or animating.
- Convert shape animations to fewer, more optimized keyframes.
3. Avoid Embedded Images or Unsupported Assets
- If your animation includes raster images, Lottie embeds them as base64 PNGs inside the JSON file, which massively increases size.
- Use only vector-based paths, and avoid JPEGs, PNGs, or AI files unless absolutely necessary.
4. Check for Unused Assets in the Export
- Bodymovin often includes unused or hidden layers in the export.
- Use the "Export Hidden Layers" toggle in the Bodymovin settings to ensure it's disabled.
5. Use DotLottie Zip Format
- Lottie Web (and Webflow’s native player) doesn’t support the dotLottie
.lottiezipped format yet, but if you're sharing Lottie files elsewhere, converting to.lottiecan reduce size up to 70%. - For Webflow, stick with basic optimizations to reduce raw JSON size.
6. Use an Optimization Tool
- Use tools like https://lottiefiles.com/compress to further reduce file size.
- This compresses the file by removing redundant data and minimizing precision of positioned points and keyframe data.
Summary
Large Lottie files result from complex designs, unsupported effects, and image assets within your After Effects project. To reduce size for Webflow, simplify shapes, eliminate raster images, minimize keyframes and points, and use optimization tools after export.