Dotlottie sometimes skips frames and lags

[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:

RPReplay_Final1704895547.MP4

How it should look like:

RPReplay_Final1704895617.MP4

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?

<script src="https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.mjs" type="module"></script>

Labels

• Add the Type: Bug label to this issue.

[samuelOsborne]

hi @IchUseKomplexe could you share a link to your animation?

[IchUseKomplexe]

hi @IchUseKomplexe could you share a link to your animation?

Sure here u go:
https://lottie.host/a276f20a-2888-4dc0-a098-2edf62682b4c/WtaeCDO9ti.lottie

[samuelOsborne]

@IchUseKomplexe The only thing I can see that might need tweaking is this

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

[IchUseKomplexe]

Taken it out now. unfortunately doesn't do something. Firstly I thought it could be a lack of performance of the using device. Reproducing it on a macbook from 2021 it's still sometimes lagging or not. When activating battery saver on iphone it always lags, without it, it sometimes lags. Actually I just can't find out why. Before I've used a webp and then switched to lottie because I thought it has to be more reliable and smoother. Somehow it doesn't. Is it about my animation which is too complex?

[samuelOsborne]

@IchUseKomplexe seeing as the animation is only 24kb I think it is the complexity, I see you have one or more pre-comps, pre-comps affect performance, as well as it being 1080x1920, if you're able to use a smaller resolution that'd be better too, maybe more like 512x512

[IchUseKomplexe]

Well actually dunno how to do that since I've had someone who did the ae animation for me. But I will keep that in mind and see, what I can do. Actually I'm just confused because it's not like it always lags, sometimes it loads perfectly. For now I will do the steps you mentioned andreproduce it. I will give u an update later.

[samuelOsborne]

hey @IchUseKomplexe we have another dotLottie based on a different renderer, it also has a react wrapper if you want to try it out : https://github.com/LottieFiles/dotlottie-web

It might perform better