In Webflow, is there a way to maintain transparency in Lottie files while using the Bodymovin plug-in?
TL;DR
- Design with a transparent background in After Effects using alpha channels and avoid solid backgrounds.
- Export via Bodymovin with correct settings (JSON only), and transparency will be preserved.
- Upload the JSON file in Webflow’s Lottie element to display the animation with transparency.
Yes, you can maintain transparency in Lottie files for Webflow when using the Bodymovin plug-in, as long as the export settings and the original design use transparency correctly.
1. Design with Transparency in After Effects
- In Adobe After Effects, ensure your composition has a transparent background by using the checkerboard view (click the checkerboard icon in the Composition panel).
- Avoid solid color backgrounds unless partially transparent or necessary for design.
- Use alpha channels (e.g., for soft edges or fades).
2. Enable Transparency in Bodymovin (Lottie Export)
- Export your animation using the Bodymovin plug-in by going to Window → Extensions → Bodymovin.
- In the Bodymovin interface:
- Check the composition(s) you want to export.
- Click the Gear icon (Settings) next to the composition name.
- Ensure "Include in JSON" is selected and transparency is supported by design.
- Make sure "HTML" is unchecked if you're only exporting JSON for Webflow.
- There’s no explicit “transparency” checkbox, but Bodymovin exports preserve transparency as long as your After Effects layers and background are transparent.
3. Upload and Use the Lottie File in Webflow
- In Webflow, use the Lottie animation element under the Add panel → Media → Lottie.
- Upload the exported JSON file.
- Once placed, the animation will preserve transparency and appear over your Webflow background layers (images, colors, gradients, etc.).
4. Troubleshooting Transparency Issues
- If transparency doesn't appear:
- Double-check that your After Effects composition background is truly transparent.
- Avoid using solid-colored backgrounds unless they're set to have lowered opacity.
- Re-export with latest Bodymovin version, as transparency is supported in all recent ones.
- Do not export as .mp4 or static images, which do not support transparency.
Summary
To maintain transparency in Lottie files for Webflow, ensure your After Effects composition has a transparent background, export with the Bodymovin plug-in properly, and upload the resulting JSON in Webflow’s Lottie element. Transparency will be preserved as long as it exists in the source animation.