Forum Academy Marketplace Showcase Pricing Features

Lottie plugin not rendering

Hi !
I’m using the Lottie plugin on my Bubble web app and it works properly as long as I’m creating my Lotties with Haiku Animator. Instead, I’d love to use After effects but when I try to use a Lottie I exported from After Effects with the 2 plugins available for this job (Bodymovin 5.6.2 or the brand new LottieFiles) the animation is not rendering at all.
Debugging, I realised the Lottie object shows different values that the one I select in Bubble design. For example I select “autoplay” and it shows “autoplay” > “no” or the opposite in debug mode. The same for “this element is visible on page load”.
Haiku Animator is not bad but it’s far from After Effect in terms of possiblities and workflow.
Does anybody have this problem ? How could I find a way around it ?
Is there a chance the Bubble team would release an official Lottie plugin any time soon?
It would make my life much easier !
Thank you!

Mac os 10.12.6
After Effects CC 2019
Bodymovin 5.6.2
LottieFiles plugin for After effect 0.1.14
Lottie plugin for Bubble 1.0.0

Can you share screenshot of your setting and link to you app page?
Also if you are using it in RG, popup or a group that is not visible on page load?

Thanks Jici for your quick answer. I’m not usually using the lotties in RG but yes when I use lotties exported with Haiku Animator they are visible on page load and everything works fine.
Here are some screenshots and a link to a test page were I putted only a lottie element playing a very basic json file that you can see here: (https://lottiefiles.com/share/5amd3S).
Here is a link to the page:
https://lottie-test.bubbleapps.io/version-test/lottie-test?debug_mode=true
and to the project:
https://bubble.io/page?type=page&name=lottie-test&id=lottie-test&tab=tabs-1
Not sure which one you wanted and if you will be able to access it though. I’m a bit of a newbie, excuse my lack of knowledge. Please tell me if you need anything else :slightly_smiling_face:

Can you make app public everyone can view (if you can edit, this is better). Actually I cannot see your app.
But the console log actually return an error and this may be related on a setting of the plugin

I made the app public, thank you

Didn’t find anything wrong in your setting and because you don’t use it with a related element or something, this is not a visibility issue (when the plugin load before related element…)

I wonder if this is related to the same issue reported by @vini_brito here: https://github.com/dambusm/Bubble-Plugin-Lottie/issues/1

Thank you for having a look at it Jici . I’ve seen this post too but I don’t understand how he solved his problem. I didn’t ask but I’m gonna do so.
I really wish I could do something about it because now I’m stuck working with Haiku Animator which was a good “emergency” option but I really need After Effects on the long run. It would be awesome if Bubble or anyone else could create an official plugin that solves this. I would definitely pay for it.

Hi, I had the same problem. What I did to solve it is to use a script found on web and paste it to the HTML element instead of using Lottie plugin.

How I’m doing it.

  1. Upload JSON file to your bubble app and copy its address.
  2. Make an HTML Element on your page in bubble.
  3. Paste script you can find below to HTML element.
  4. In the HTML script, change the file address for yours and change the size to match your HTML element.

It’s working for me, and what is great about it that you will see animation in your bubble editor.

Check app you made public. I’ve added just below your Lottie element an HTML element with the script for your Lottie animation, and I see it’s working.

EDIT >> new script


4 Likes

Only problem is with responsive design as your animation won’t resize with the screen. Maybe someone have quick fix for it? @Jici?

EDIT>>
Found solution for this problem and you can find new script.


2 Likes

Thanks a lot @wotjek. I’m trying that now! (I couldn’t use my mac for a week but now it’s fixed)

Hi,

Maybe I am just looking right past it, but is the script pasted somewhere in this thread? All I see is the words “new script” or has anyone found any other solution to the lottie issue?

Hi Wojtek, would you mind adding the script when you have a moment please. Thank you

Sure,

<script src="https://unpkg.com/@lottiefiles/[email protected]/dist/tgs-player.js"></script>
<lottie-player 
    src="XXXXXXXXXXXXXX.json"  background="transparent"  speed="1"  loop  autoplay >
</lottie-player>
2 Likes

Also you can check the player options on this website https://lottiefiles.com/web-player

But I had problem with their script src and later found script I’ve posted above.

1 Like

Hi guys,

Does anyone see any material different when using the source from Lottiefiles web player and hosted in on Bubble?