How can I fix the issue of GIFs not animating when imported as images in Webflow?
TL;DR
- Use the Image element (not backgrounds) to add GIFs and confirm the file is under 4MB and actually animated.
- Publish the site to test animation, and if issues persist, use external hosting or convert to video/Lottie format.
If your GIFs are not animating when imported into Webflow, it's typically due to how they're embedded or formatted. Here's how to troubleshoot and fix the issue.
1. Use the Image Element, Not Backgrounds
- GIFs must be added via the Image element to preserve animation.
- Do not use GIFs as background images (e.g., in Div Blocks) — Webflow treats them as static images and only shows the first frame.
2. Upload the GIF Correctly
- Use the native Assets panel to upload your GIF.
- Drag and drop into the Image element using the “Choose Image” option.
3. Verify the GIF File
- Check that the GIF is actually animated. Preview it in your file browser or browser to confirm.
- Ensure it’s not too large; Webflow has a 4MB limit per asset file.
4. Check Autoplay Settings (For Video Elements Only)
- If you mistakenly used a Video element to upload the GIF as a video, instead of an actual GIF, there's no animation unless:
- You use Embed or Lottie animations, or
- Convert it into a .webm or .mp4 with autoplay + loop settings.
5. Published vs Editor Preview Mode
- Webflow’s Designer or Preview mode may sometimes not display animated GIFs.
- Always publish the site to see if the GIF works in the live environment.
6. Use External Hosting as a Fallback
- If Webflow compresses your GIF and damages the animation, host it on an external CDN (like Giphy or Imgur).
- Then place it using an Embed element with an
<img>tag and a direct image URL (must end in.gif).
Summary
To fix GIFs not animating in Webflow, use the Image element, not background images, ensure the file is under 4MB, and publish the site to check proper animation. For complex needs, use external hosting or convert to a video/animation format like Lottie.