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?

3

Are you loading the lottie-player.js correctly? :thinking:

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.

7

Make sure you call the animation.

I did a quick test and it works for me. It’s all in the docs here:

GitHub - airbnb/lottie-web: Render After Effects animations natively on Web, Android and iOS, and React Native. http://airbnb.io/lottie/

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!

11

In my quick trial I used the ID:

<script>
var animation = lottie.loadAnimation({
  container: document.getElementById('lottie-animation'),
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: './js/lottie.json'
});
</script>

Do you have the path to the .json file set correctly? I added it as a project attachment and that works well (wrong location though :grin:). It would be actually great if we could add .json files to the asset manager. @Norm :thinking: