Quick checklist

  1. Open the animation file URL directly in your browser. If it 404/403s, fix the path/permissions first.
  2. Confirm you are embedding the right format (Lottie JSON vs .lottie package) for the player you’re using.
  3. Make sure your page is HTTPS and your animation URL is also HTTPS (mixed-content can block loading).
  4. Give the player/container an explicit width and height (a “blank” embed is often a zero-height container).
  5. Check browser console errors (missing file, blocked request, invalid JSON, CORS).

Most common problems and fixes

  • Nothing shows up (blank area)
    • Set an explicit height on the container (for example 300px) and ensure it’s not inside a collapsed element.
    • Try a different renderer mode (SVG vs Canvas) if your player supports it.
    • Verify the animation actually contains visible layers (open it in an editor/preview).
  • Animation loads but is cropped or stretched
    • Use “contain” / “cover” style sizing options in your player (if available).
    • Ensure the container aspect ratio is reasonable for the animation.
    • If the animation was exported with a huge artboard, consider re-exporting with correct bounds.
  • Autoplay does not start
    • Some browsers restrict autoplay, especially with sound or on mobile; use a user interaction (click) to start.
    • Respect “Reduce Motion” settings: if your site disables motion, your script may intentionally prevent autoplay.
    • Try setting loop=false and triggering play manually on page load after the player is ready.
  • Plays in one browser but not another
    • Switch renderer mode (SVG vs Canvas) if you see glitches or nothing renders.
    • Check if your animation uses features not supported by your chosen player/version.
    • Test with the latest version of the player library.
  • Loads very slowly
    • Large JSON or heavy effects can slow down. Consider optimizing, simplifying, or using a .lottie package if supported.
    • Enable gzip/brotli on your server for JSON.
    • Use a CDN or correct caching headers for repeat visits.
  • Console error: CORS blocked / No ‘Access-Control-Allow-Origin’
    • If the animation is hosted on a different domain, configure that server to allow your site origin.
    • As a quick test, host the file on the same domain as your page.
  • Console error: Unexpected token / Invalid JSON
    • The file is not valid JSON (or the server returns HTML like a 403 page). Open the URL directly and confirm it is raw JSON.
    • Re-export the animation or replace the file with a known-good Lottie export.

Performance tips (recommended)

  • Lazy-load animations below the fold (don’t start 10 animations at once on page load).
  • Pause animations when offscreen (IntersectionObserver) and resume when visible.
  • Prefer fewer, larger animations over many small ones running simultaneously.
  • Keep looped animations short and lightweight for best battery/performance on mobile.

Embed debugging tips

  1. Open DevTools → Console and Network tabs.
  2. Reload and confirm the animation request returns HTTP 200 and the correct content (JSON or .lottie).
  3. If you see a 301/302 redirect, confirm the final URL is still accessible publicly.
  4. Try the same URL in a simple test page to isolate CSS/layout issues from loading issues.

When to contact the author

If the file loads but the animation looks broken, missing layers, or behaves differently than expected, it’s often an export/design issue.

Was this article helpful?

0 out of 0 found this helpful