Use a public, direct file URL

  • Your animation URL should open directly in a browser tab (no login required).
  • Avoid “share” links that redirect to a viewer page. Use a direct file URL that returns the raw file.
  • Test your URL in an incognito/private window to confirm it’s publicly accessible.

Quick checks

  1. Open the file URL in a browser:
    • Lottie: .lottie or .json should download or display as raw content.
    • Rive: .riv should download (or display as binary download).
  2. Make sure your page is HTTPS and your file URL is HTTPS (no mixed-content).
  3. In DevTools → Network, confirm the request returns HTTP 200 (not 301/302 to a blocked URL).

CORS (cross-domain hosting) basics

  • If your website and your animation files are on different domains, browsers may block the request unless CORS is allowed.
  • Typical error: “blocked by CORS policy” or missing “Access-Control-Allow-Origin”.
  • Best option: host the files on the same domain as your website.
  • Alternative: configure your file host/CDN to allow your website origin.

Correct file types (Content-Type)

  • Your server should send a reasonable Content-Type header for the file.
  • For Lottie JSON:
    • Recommended: application/json
  • For .lottie packages:
    • Recommended: application/octet-stream (or a vendor type if your host supports it)
  • For .riv files:
    • Recommended: application/octet-stream
  • If a file URL returns text/html, you are probably getting an error page (403/404) instead of the real file.

Caching and performance (recommended)

  • Set cache headers for static animation files (especially on a CDN).
  • When you update a file but keep the same URL, users may see the old version due to caching.
  • Best practice: version your file URLs (example: animation-v2.riv) when you publish updates.

Compression tips

  • Lottie JSON can be large. Enable gzip/brotli compression on your server/CDN for faster loads.
  • .lottie and .riv are already compressed/binary packages in most cases, so compression gains may be smaller.

Most common hosting errors (and what they mean)

  • 403 Forbidden: file requires permission/login, or hotlinking is blocked.
  • 404 Not Found: wrong path, wrong filename, or the file is not deployed.
  • Mixed content blocked: your site is HTTPS but the file URL is HTTP.
  • CORS blocked: file is on another domain and the host does not allow your origin.
  • HTML returned instead of file: your server is returning an error page or redirect page instead of the raw file.

Embedding notes (Lottie)

  • If you use a Lottie player, point it to your direct hosted .lottie or .json URL (not a preview page URL).
  • If your player fails silently, check DevTools Network for the file request and verify status 200 and correct Content-Type.

Embedding notes (Rive)

  • Rive runtime loads the .riv file via URL. If it fails, it’s almost always a blocked request (403/CORS/mixed content).
  • Confirm the .riv URL is direct and publicly accessible.
Was this article helpful?

0 out of 0 found this helpful