How can I solve the issue of my circle loading animation not moving on Webflow after following a tutorial on After Effects and converting expressions to keyframes?

If your circle loading animation isn't moving in Webflow, despite using After Effects and exporting via Bodymovin/Lottie, the issue likely involves improper keyframe conversion or export settings. Here's how to solve it:

1. Confirm You Converted All Expressions Properly

• Open your After Effects file.
• If your animation is driven by expressions (e.g., a looping rotation with time expressions), expressions must be converted to keyframes because Bodymovin does not support many expressions.
• Select your layer, go to the rotation property, right-click and choose Convert Expression to Keyframes. This bakes the animation into actual keyframes that Lottie can understand.

2. Test Playback in Bodymovin Preview

• In After Effects, open the Bodymovin (LottieFiles) Extension panel.
• Click on Preview before exporting.
• If it's not animating here, then the problem is in AE — not Webflow.
• Fix any missing keyframes or unsupported expressions before exporting again.

3. Export a Clean JSON File via Bodymovin

• Use Bodymovin (or LottieFiles plugin) to export the animation.
• In the export settings, make sure:
• "Include in JSON" is selected.
• "Glyphs" is unchecked (if you're not using custom fonts).
• All assets are embedded.
• Export to a single .json file with no image sequences or raster content.

4. Upload and Apply the Animation in Webflow

• In Webflow Designer, drag in a Lottie Animation element from the Add panel.
• In the Element Settings, upload your exported .json file.
• Set Trigger to "Loop" or "Scroll", depending on your desired behavior.
• Ensure that the element is visible and size is not zero; it must be properly sized in layout (Width/Height settings).

5. Use a Loop-Compatible Lottie Animation

• If the animation is meant to spin continuously, make sure the exported animation:
• Has a full rotation in the keyframes.
• Is set to loop in the Lottie animation settings in Webflow.
• Also ensure that the Lottie JSON file is not empty or too short (e.g., a single static frame).

6. Check for Webflow Rendering Issues

• Ensure that the Lottie element is not inside a hidden or display:none container.
• Test on publish (click Publish Site) — it may not animate in Webflow’s Designer View, but works on the live site.

Summary

Convert all expressions to keyframes in After Effects, test the animation in Bodymovin, and ensure you're uploading a valid JSON file with clear keyframe animation into Webflow. Incorrect or missing keyframes from unbaked expressions are the most common cause of a non-moving circle animation.