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?
TL;DR
- Convert all After Effects expressions to keyframes and avoid unsupported features like effects, 3D layers, or track mattes.
- Export the animation using the Bodymovin plugin, validate the JSON on LottieFiles, and correctly integrate it into Webflow using the Lottie component.
If your circle loading animation isn't moving in Webflow, it's likely due to issues with how the After Effects animation was exported and integrated via Lottie.
1. Double-Check AE to Lottie Export
- In After Effects, ensure the animation only uses keyframes. Expressions often cause issues unless properly baked into keyframes.
- In AE, go to Animation > Keyframe Assistant > Convert Expression to Keyframes on all animated properties.
- Export using the Bodymovin plugin (LottieFiles plugin also works, but Bodymovin is standard).
- In the Bodymovin panel, make sure you select the correct composition, and check "Include in JSON".
2. Remove Unsupported AE Features
- Lottie does not support all AE effects. Avoid using:
- Effects like Radial Blur or Glow
- 3D layers
- Track Mattes (use alpha masks or solids instead)
- Stick to shape layers, position/rotation/scale keyframes, and basic easing.
3. Verify the JSON File is Valid
- After exporting, preview the Lottie JSON using https://lottiefiles.com/preview.
- If the animation doesn’t render or doesn’t move in the viewer, the issue is in the AE export—likely a missing keyframe or unsupported layer.
4. Add the Lottie Animation Correctly in Webflow
- Drag in a Lottie element onto the canvas.
- Upload your .json file to the Lottie animation settings.
- Set it to play on "Page Load" or "Scroll", or control it via an interaction.
- Set Renderer to SVG if you need crisp shapes; fallback to Canvas if performance lags.
5. Debug in Webflow Preview
- If correctly uploaded, your animation should move in Webflow Preview and Published site.
- If it still doesn’t move:
- Re-export the .json ensuring no expressions or AE errors exist.
- Try a simpler animation as a test to isolate the issue.
Summary
To fix a non-moving circle loader animation in Webflow, ensure all AE expressions are converted to keyframes, avoid unsupported AE features, and export with Bodymovin correctly. Test the .json file independently before uploading it to Webflow via the Lottie component.