Lottie web image sequence - start animation after loading images

I am using Airbnb's Lottie to create an animation from jpg sequence that plays when the page is loaded. Problem is that the animation starts as soon as the webpage opens, but it seems that by the time the images load the animation is already in half or even at the end. What is the best way to handle this, so that user sees the animation from the beginning?

I've tried using both DOMLoaded and data_ready event listening, but neither of them seem to fix the problem.

Currently my code is as follows:

      var params = {
        container: document.getElementById('hero-anim'),
        animationData: animationData,
        renderer: 'svg',
        loop: false,
        autoplay: false,
      };

      var anim = lottie.loadAnimation(params);
      anim.addEventListener('DOMLoaded', lottie.play());

Website where this is used: test.romancecapsule.com

Any ideas on how to fix this, please? Also one more problem I am running into is in Firefox (mac, v70.0.1) where it is flickers white between each image.

Thank you

from Lottie web image sequence - start animation after loading images