What could be causing my lottie animation not to appear when I drag and drop the file into the Webflow canvas? I have installed the Bodymovin plugin and set up my After Effects preferences correctly, but still no luck. Additionally, I have set up the After Effects file with a RGB + Alpha for a transparent background. Could this be the issue?

If your Lottie animation is not appearing in Webflow after dragging it into the canvas, several factors could be causing the issue, including export settings, file structure, or unsupported features in your animation.

​

1. Check the Lottie JSON File

• Ensure you are dragging in the JSON file exported by Bodymovin, not the .aep or a folder.
• The JSON file should be a single file — Webflow does not support separate assets or image sequences in Lottie animations.

​

2. Limitations in After Effects Features

• Avoid using expressions, image assets, effects, or precomps with 3D layers, as most are not supported by Lottie.
• Stick to shape layers, solid colors, and basic transformations (Opacity, Position, Scale, etc.).

​

3. Alpha Channel Misunderstanding

• Lottie doesn't interpret RGB + Alpha in the traditional video sense. Transparency must be achieved via shape layer transparencies or trim paths, not with alpha channels like in rendered video.
• The RGB+Alpha setting in your After Effects output is only relevant for rendered video formats (e.g., MOV), not for Lottie JSON, which is vector-based.

​

4. Export Settings in Bodymovin

• Confirm you are exporting using Bodymovin’s recommended settings:
• Select only the required composition.
• Do not check "Include in JSON" for images, unless you're using SVG-based external assets.
• Avoid embedding image assets — Webflow doesn’t support external references inside the Lottie JSON.

5. Test the Lottie File Outside Webflow

• Try uploading your Lottie JSON file to https://lottiefiles.com/preview to confirm it plays correctly.
• If it doesn’t display there, the issue is in your After Effects or Bodymovin export, not Webflow.

​

6. File Name and Structure

• Ensure your file name has no spaces or special characters.
• Do not import a zipped folder. Webflow requires only the raw JSON file.

​

7. Browser Console Errors

• Open your browser’s Developer Console in Webflow preview (F12 or right-click > Inspect > Console).
• Look for JSON parse errors or 404s for missing asset references, which can indicate invalid Lottie structure.

​

Summary

Despite setting RGB + Alpha in After Effects, that setting doesn't affect Lottie JSON output. Focus instead on simplifying your animation to supported vector elements, ensuring your Bodymovin export uses proper settings, and that the JSON file is complete and self-contained. Use LottieFiles to double-check whether your animation is valid before dragging into Webflow.