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?

Your circle loading animation not moving in Webflow is likely due to issues in the Lottie JSON export or configuration after converting expressions to keyframes in After Effects.

​

1. Ensure You Used Keyframes Only

• Expressions do not transfer properly in Lottie; they must be converted.
• In After Effects, select your animated layers and go to Animation > Keyframe Assistant > Convert Expression to Keyframes.
• Double-check that there are no remaining expression icons ("fx") on any animated properties after the conversion.

​

2. Set Up Correct Export Settings in Bodymovin

• Use the Bodymovin plugin (via Adobe Extensions or AEUX) to export your animation.
• In the export settings:
• Ensure "Glyphs" is unchecked (especially if using text).
• Check that "Include in JSON" is active for the animation files.
• Confirm the assets directory is empty if your animation doesn’t use images or external files (Lottie handles shapes and vector paths best).

​

3. Verify the Lottie File in a Previewer

• Use https://lottiefiles.com/preview to test your Lottie JSON file before uploading to Webflow.
• If the animation doesn’t move here either, go back and check:
• That your composition has a non-zero duration and keyframes actually cause motion.
• You did not accidentally freeze at frame 0 or convert only some expressions.

​

4. Check Webflow’s Lottie Integration Settings

• Upload the Lottie JSON file to the Assets panel in Webflow.
• Drag the Lottie animation onto the canvas.
• In the right-hand panel:
• Under Animation Settings, ensure "Loop" or "Autoplay" are toggled on (unless triggering it manually).
• Check "Renderer: SVG" if your animation used vector shapes.

​

5. Match Frame Rate and Timeline

• Make sure your After Effects composition frame rate matches Webflow’s rendering.
• Confirm the exported animation is not just one frame long; check composition length in seconds and that multiple frames exist.

​

6. Re-export If Needed

• If the issue persists, try re-exporting:
• Start with a new AE file using only shape layers.
• Avoid precomposing too many nested layers, as Bodymovin sometimes ignores them.

​

Summary

Your circle animation likely isn’t moving due to unconverted expressions or incorrect export settings in Bodymovin. Double-check that all After Effects expressions are converted to keyframes, the export includes valid motion data, and the JSON plays as expected on Lottiefiles before uploading to Webflow with correct autoplay/loop settings.