In Webflow, is there a way to maintain transparency in Lottie files while using the Bodymovin plug-in?
TL;DR
- Ensure your After Effects composition has a transparent background and no solid or filled background layers.
- Export using Bodymovin with transparency settings intact, upload the .json to Webflow’s Lottie element, and avoid raster image sequences unless they support transparency.
Yes, transparency in Lottie files is supported in Webflow when exported correctly using the Bodymovin plugin in After Effects. The key is how the original animation is built and exported.
1. Use Transparent Elements and Backgrounds in After Effects
- Make sure your composition’s background is transparent. Avoid solid color backgrounds.
- When adding layers, avoid filling the background with shapes or solids unless they're intentionally part of the design.
2. Correctly Export with Bodymovin
- Open Bodymovin in After Effects and add your composition to the render queue.
- In the Bodymovin export panel:
- Do not check "Include in JSON the image sequence" unless you’re using raster (non-vector) images—transparency may not behave as expected with embedded raster images.
- Ensure vector artwork and transparency settings in your layers are maintained.
- Export the .json file—no background color will be embedded if the comp is transparent.
3. Upload Lottie File in Webflow
- In Webflow Designer, drag a Lottie element into your page.
- Upload your exported .json file.
- The animation will respect transparency, meaning it will blend naturally against background colors or images in Webflow.
4. Check for External Images
- If your animation uses .pngs or other assets:
- These assets must have transparency themselves.
- Embed them as .png with transparency or use vector layers instead to preserve full transparency.
5. Avoid Using Solids or Background Layers
- If your animation has a full-sized solid colored layer (even partially transparent), it will eliminate the transparent background.
- Convert solid backgrounds to "null" or delete them if they’re not needed.
Summary
To maintain transparency in Lottie animations in Webflow, ensure your After Effects composition has a transparent background, export it properly with Bodymovin, and avoid full background layers. When used correctly, Webflow’s Lottie integration fully respects transparency in the .json file.