Poster frame on slow loading jsons

1

Hi all, I’m hoping for help with 2 issues.

First is that i’m getting this error on a page with multiple Lottie jsons;

Uncaught DOMException: CustomElementRegistry.define: ‘lottie-player’ has already been defined as a custom element

I’m loading the Lottie player via a html module in Beaver Builder. Initially I used the Lottie module, but i could’t control the animation on scroll in Motion.page unless I used the html module. I’ve only added

once, as I’m aware adding multiple times can cause the page to break.

Any ideas what I need to change? Baring in mind i’m a designer not a coder!

Second is that my animations are large, due to the fact that the client supplied them without knowing Lottie limitations. I could only get it to work by optimising a png sequence.

The load time is too long, due to 1.5mb optimised json files. Does anyone know if it is possible to set a ‘poster’ image that displays the first frame of the animation upon load?

Any assistance would be hugely appreciated!

2

You can reduce load times for large Lottie animations, you can set a poster image that displays the first frame of the animation upon load. You can achieve this by creating a static image representing the first frame and displaying it before initializing the Lottie animation.

3

Hi, it seems that the page has already defined the “lottie player” and are defining it again. Try to check for the name “lottie player” and remove it, see if it works.

4

Did you try to optimize the animations file in your workspace?

5

Hi, thanks I’ll try removing the Lottie player. It should only appear once on the page, correct?

I’ve optimised the png’s as much as possible, without loss of quality.

I’m hoping for a solution whereby I can have a placeholder/poster image that loads before the animation loads.

Is this possible?

Thanks
Mike