LottieFiles / dotlottie-web

Official LottieFiles player for rendering Lottie and dotLottie animations in the web. Supports React, Vue, Svelte, SolidJS and Web Components.
https://developers.lottiefiles.com/docs/dotlottie-player/
MIT License
179 stars 11 forks source link

Dotlottie sometimes skips frames and lags Type: Bug #99

Closed IchUseKomplexe closed 3 weeks ago

IchUseKomplexe commented 9 months ago

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

theashraf commented 9 months ago

@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] commented 7 months ago

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 commented 5 months ago

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

github-actions[bot] commented 3 months ago

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.