Using Lottie animations in Blocs

Tips and Tricks
1

Hello everyone,

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.

  1. Drag and drop your lottie file into the Lottie editor in lottiefiles.com
    Lottie Editor: Edit and customize Lottie animations - LottieFiles

  2. After editing your lottie, upload it (button at the lower right corner of lottie editor) to your personal account in Lottie Files (it’s free).

3.Copy the asset link to Lottie web player

  1. Adjust lottie settings if necessary and copy code

  2. In Blocs add a code widget and paste the code

  3. Preview your website

  4. You should see your lottie animation running in your website

  5. You can even edit some parameters of your lottie in the code widget such as color, size and speed

Let me know if this worked for you and feel free to comment and suggest alternative methods for adding a lottie to Blocs.

All the best

1 Like
2

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?

4

Hi Jerry,

Since it isn’t working, I’m afraid I can’t say “yes, 100%”, but the snippet I get from lottiefiles seem straight forward enough:

<script src="https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.js"></script> 

<dotlottie-player src="https://lottie.host/xxx/yyy.lottie"  background="transparent"  speed="1"  style="width: 300px; height: 300px;" loop autoplay></dotlottie-player>

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.

5

What errors are showing in the console log. That will give your an idea of what’s happening.

I haven’t had much experience with these. But I suspect the player isn’t for self hosted. You might be better using their web library.

6

Hey,

I’m away from the computer now but I’ll try a few more options later.

But I habe already tried the normal player as well as the dotLottie above. I haven’t read anything about any restrictions on self hosting though.

8

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.

Are you hosting the lottie .js locally as well?

9

Give that a shot. That’s the method I recall using.

Did you have any errors in the console ?

10

No errors. And remember: everything loads and runs correctly… as long as the src is hosted on their servers.

I’ll look at it more in depth when I find time. Looking at the simple code, I didn’t expect any issues.

Thanks for the inputs!

12

An old post, but I encountered this myself today.

The issue is CORS (Cross-Origin Resource Sharing)

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.

2 Likes