In Webflow, is there a way to maintain transparency in Lottie files while using the Bodymovin plug-in?

Yes, you can maintain transparency in Lottie files with Bodymovin when using them in Webflow. However, this depends on how the animation is exported and implemented.

​

1. Ensure Transparency from After Effects  

• Design the animation with transparency in mind: Use transparent layers or compositions without a background.
• Avoid solid background layers: These will override transparency even if the rest is transparent.
• Alpha channels are key: Ensure transparency is set through alpha channels where needed.

​

2. Export with Bodymovin Plugin Correctly  

• Install and use the Bodymovin extension inside Adobe After Effects.
• In the export settings:
• Set the composition background to transparent.
• Do not include a background shape or image in the layers.
• Make sure 'Include in JSON' is checked for all relevant assets.

​

3. Upload the Lottie JSON to Webflow  

• Go to Webflow Designer, then drag in a Lottie animation element.
• Upload the exported JSON file from Bodymovin.
• Webflow supports transparency in Lottie files automatically if the JSON preserves it.

​

4. Webflow’s Lottie Limitations  

• No support for image-based alpha masks: If you're relying on .png sequences or embedded images with alpha channels, transparency may not render properly.
• Only vector-based transparency is reliably supported (i.e., shape layers with opacity or alpha effects inside After Effects).

​

Summary  

To maintain transparency in Lottie animations used in Webflow, ensure your After Effects composition uses transparent layers, export cleanly with Bodymovin (excluding any background layers), and import the resulting JSON directly into Webflow’s Lottie element. Vector-based transparency will render correctly in Webflow.