Dotlottie sometimes skips frames and lags Type: Bug

[IchUseKomplexe]

Overview

Hey, so I've added a preloader to my shopify website and used the dotlottie animation. It's only shown once in a session and only on the main page. Via HTML I preload the .lottie file and the animation plays, after the DOM Content has completely loaded, to ensure, the timer syncs with the animation.

My html:

<div id="loader">
<dotlottie-player background="transparent" id="lottie-loader" speed="1" style="width: 50%; height: 50%" direction="1" mode="normal" loop autoplay></dotlottie-player>
</div>

<link rel="preload" fetchpriority="high" href="https://lottie.host/a276f20a-2888-4dc0-a098-2edf62682b4c/WtaeCDO9ti.lottie" type="application/json">

My javascript

preloader.js

  const loader = document.getElementById("loader");
  $('#loader').hide();
}

$(document).ready(function() {
  if (document.cookie.indexOf("preloaderShown=true") === -1) {
      document.cookie = "preloaderShown=true; path=/";
    window.onload = function() {
      const player = document.querySelector('dotlottie-player');
    player.load('https://lottie.host/a276f20a-2888-4dc0-a098-2edf62682b4c/WtaeCDO9ti.lottie');
      setTimeout(function() {
      hidePreloader();
    }, 3100);
    };

The animation hides, after the preloader has completely loaded.

} else {
    // If the preloader has already been shown in this session, hide it immediately
    $('#loader').hide();
  }
});

The Problem

Sometimes the animation skips some frames and lags, especially on mobile devices. It doesn't matter if your connection is slow or fast, since the animation only loads after the page is completely loaded.

How it looks when it bugs:

https://github.com/LottieFiles/dotlottie-web/assets/42212706/413d5b55-4829-4759-8442-dc443060b9d9

How it should look like:

https://github.com/LottieFiles/dotlottie-web/assets/42212706/b3022544-d137-4628-ba8e-e2f531aa38f6

This is also reproduceable on desktop. Sometimes it lags, sometimes not. Hope some1 can help me.

Consuming repo

What repo were you working in when this issue occurred?

...

Labels

• [x] Add the Type: Bug label to this issue.

[theashraf]

@IchUseKomplexe I think you're using the @dotlottie/player-component, you can try to use the @lottiefiles/dotlottie-web instead

Here is a codesandbox example you can refer to for the usage https://codesandbox.io/p/devbox/lottiefiles-dotlottie-web-basic-example-tcy3rv

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs.

[theashraf]

@IchUseKomplexe, I wonder if you've tried migrating to @lottiefiles/dotlottie-web. Any updates?

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs.