Lottie Animation suddenly disappears

Hi there, I'm kind of at a loss here. I incorporated some fun JSON/Lottie animations into my website following the steps provided by Carl Johnson on his YouTube page. Everything was working great all week until this morning. Somehow, all the animations, including others I tried (whether made by me or from different sites), don't seem to be working anymore. Strangely, nothing was changed. Does anybody recognize the problem or know what could be happening?

The site is https://www.onderdompelen.nl/
Password is: barrydebaars

I injected this code in the header: <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>

And this code for the player as a code-block:

<lottie-player
  autoplay
  controls
  loop
  mode="normal"
  src="https://lottie.host/410ebfb0-554a-4e32-bb7b-cb1601551c25/PBnNRsz69i.json"
  style="width: 320px"
>
</lottie-player>

Hope somebody can help 🙂

2 hours ago, Paulkant said:

Hi there, I'm kind of at a loss here. I incorporated some fun JSON/Lottie animations into my website following the steps provided by Carl Johnson on his YouTube page. Everything was working great all week until this morning. Somehow, all the animations, including others I tried (whether made by me or from different sites), don't seem to be working anymore. Strangely, nothing was changed. Does anybody recognize the problem or know what could be happening?

The site is https://www.onderdompelen.nl/
Password is: barrydebaars

I injected this code in the header: <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>

And this code for the player as a code-block:

<lottie-player
  autoplay
  controls
  loop
  mode="normal"
  src="https://lottie.host/410ebfb0-554a-4e32-bb7b-cb1601551c25/PBnNRsz69i.json"
  style="width: 320px"
>
</lottie-player>

Hope somebody can help 🙂

 

Watch this tutorial to use the widget steps for lottie animations. 
 

@justinjamesclackThanks! It seems like a good alternative if, by all means, I can't find the problem with the original approach and why it doesn't seem to work since this morning.

Just now, Paulkant said:

@justinjamesclackThanks! It seems like a good alternative if, by all means, I can't find the problem with the original approach and why it doesn't seem to work since this morning.

If you can't find an alternative way to get a lottie animation to work, it may benefit you to learn how to animate things yourself. 

I personally use SVGator to animate svg's. SVGator also allows me to export the svg as CSS which means I can add those animations to my website without the need to use JS scripts.

Thanks, I'll take a look at SVGator.

I'm using animations that I created myself in After Effects and exporting them via Bodymovin, then uploading them through Lottiefiles.

However, I'm unsure if I can export them as SVG or how to properly implement them in Squarespace.

5 minutes ago, Paulkant said:

Thanks, I'll take a look at SVGator.

I'm using animations that I created myself in After Effects and exporting them via Bodymovin, then uploading them through Lottiefiles.

However, I'm unsure if I can export them as SVG or how to properly implement them in Squarespace.

To save your illustrator artwork as SVG, choose File > Export > SVG (svg). Check Use Artboards if you'd like to export the contents of your artboards as individual SVG files.

Then watch this video on how to import and how to use SVGator;
 

once you're happy with the animation, export it as CSS and then take that CSS and add it to a code block in squarespace