Lottie files does not shows up on safari when you navigate to other url's

[MayankSG]

I am using Lottie files as a loading screen. What I want to do is whenever the user clicks on the nav item Lottie file should show up but whenever I click on the nav bar item the Lottie file does not show up and this is specifically to ios devices. Whereas it works great on other screens android, ubuntu, windows, etc.

Can you please let me know what I am doing wrong?

[bodymovin]

hi, can you share a link with a reduced example? It might be related to rerouting and how svgs handle ids, but not sure only with this info.

[MayankSG]

Hey @bodymovin, Thanks for your response. I am doing something like this.

 <div id="loading-overlay-dark">
   <div class="d-flex justify-content-center align-items-center h-100" id="svg-container"></div>
  </div>

This is my initial hidden overlay.

$(document).on('click', 'a[href="/page_path"]', function () {
  var loader = $('#loading-overlay-dark');
  loader.show()

  var animation = lottie.loadAnimation({
    container: document.getElementById('svg-container'), // the dom element that will contain the animation
    renderer: 'svg',
    loop: true,
    autoplay: false,
    path: '/data_path.json', // the path to the animation json
  });

  animation.play();
});

So, I am using lottie-file as the loading screen. So what happens when I click on navbar URL, my loading-overlay-dark screen shows up but lottie-file does not show up.

And If I do something like this

$(document).on('click', 'a[href="/page_path"]', function (event) {
  event.preventDefault();
  var loader = $('#loading-overlay-dark');
  loader.show()

  var animation = lottie.loadAnimation({
    container: document.getElementById('svg-container'), // the dom element that will contain the animation
    renderer: 'svg',
    loop: true,
    autoplay: false,
    path: '/data_path.json', // the path to the animation json
  });

  animation.play();
});

Animations start playing up but it stops my functionality to navigate to another page.

Also, this is the cdn I am using https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.8.1/lottie.min.js

This is happening only on ios mobile and desktop devices. Whereas on Android and on the other OS platforms it's working flawlessly. Please let me know if I am doing anything wrong.

[MayankSG]

Here is the link of example site

https://lottie-player-airbnb.netlify.app/

lottie_player_airbnb.zip