Following several threads about the usage of Lottie animation in Blocs, I decided to create a new post to try to illustrate in a simple way how I was able to add Lotties.
It’s been a while since this post.
I have access to a library of Lottie files and would like to host some directly in a folder on my site.
While adding links to src=“https://lottie.host…” works according to the instructions above, it won’t work when I link to a file on my server.
My library consists of FileName.json but I’ve also converted some files to FileName.lottie but that doesn’t make any difference. Both the .json and .lottie files I have work well in their converter, so this isn’t an issue of broken files.
Does anyone have a good script tag to a universal Lottie player that accept src links to any host?
First a script tag that links to the web player and then the player/file itself.
The could above, that would link to a file hosted on lottiefiles work, but if I redirect the src=“MyFile.lottie” to something on my own server (same file as the hosted one), it won’t load. The issue then of course being that I can only host 10 Lotties at their place for free before I have to throw them $20 per month. Considering that a dotLottie seems to weigh 6-20 kB(!) I wish they’d host a bit more for free.
Regardless, I’d be happy to host my own library of course.
ADDED: I should say that I just embed all of this into the code widget, but I also tried putting the script bit in my project HEADER when things didn’t work. I have also tried with my native .json Lottie as well as that same .json Lottie converted to a .lottie file to see if it was a version number thing.
I’m not sure I understand what you say is missing. I’m referencing the .js script and then call the source file with loop and autoplay on, as per the lottiefiles web code that they provide.
The .js script is slightly different for .json and .lottie files, but I’ve tried both.
I have no other ‘installations’ going and I don’t think I need anything else.
Are you talking about a setup like this:
lottie.loadAnimation({
container: element, // the dom element that will contain the animation
renderer: 'svg',
loop: true,
autoplay: true,
path: 'data.json' // the path to the animation json
});
I’ve seen this example too, where you name a DIV tag that you reference and so on. I haven’t tried this, as the code I posted above seemed clean and straight forward with no apparent limitation.
Why You Can’t Use Your Remote .lottie File on localhost
Your remote server might not be configured to allow cross-origin requests from localhost. When your site tries to fetch the .lottie file from your remote server, the browser blocks the request due to security policies unless your server explicitly allows localhost as a permitted origin.
Why Lottie’s Website Works
When you upload the file to Lottie’s CDN, their servers are properly configured with CORS headers that allow requests from any origin, including localhost. This is why your site can successfully fetch and use the .lottie file from their link.
How to Fix It
<FilesMatch "\.lottie$">
Header set Access-Control-Allow-Origin "*"
</FilesMatch>
Add this to the .htaccess file on your remote server where you host your .lottie files.
This will ensure that all .lottie files served from your server include the correct CORS headers.