Page freezes when `setSegment` has start index > end index

[maxrchung]

Overview

When I try to call setSegment(50, 30) where the start index is greater than the end index, I get a console error then see my whole page freeze up. Not sure what exactly is going on but maybe this causes an infinite loop somehow.

dotlottie-player.wasm:0xcb1d1 Uncaught RuntimeError: unreachable
    at dotlottie-player.wasm:0xcb1d1
    at dotlottie-player.wasm:0x24d46
    at dotlottie-player.wasm:0xfa712
    at dotlottie-player.wasm:0xf57bc
    at DotLottiePlayer.requestFrame

Why do I want start index > end index? Here's my use case: I have a loopable Lottie animation that has different sections, let's say animate-in goes from frame 0-30 and animate-out goes from 30-60. On mouse over, I want the animation to play until it reaches frame 30, and on mouse leave, I want the animation to play until it reaches frame 60.

There could be situations where I want the animation to play through even wrapping around the end, for example, something like setSegment(50, 30), so that on hover, my animation can smoothly play from currentFrame 50, loop around the end, and stop at 30. Maybe there is a better way to do this but I'm not aware.

It seems as long if start index < end index, this page freezing error doesn't happen. I could split up my hover animation to go from 0-30 on hover then jump to 30-60 on leave, but that can be choppy.

Consuming repo

I can share a codepen and code here (React): https://codepen.io/maxrchung/pen/vELdpBm

Warning: Codepen preview is kind of unstable because this bug is causing the app/page to freeze.

Here's the gist of the logic:

const App = () => {
  const ref = React.useRef(null);

  return (
    <DotLottieReact
      dotLottieRefCallback={(lottie) => ref.current = lottie}
      onMouseOver={() => {
        const lottie = ref.current;
        if (!lottie) return;

        lottie.setSegment(lottie.currentFrame, 30);
        lottie.play();
      }}
      onMouseLeave={() => {
        const lottie = ref.current;
        if (!lottie) return;

        lottie.setSegment(lottie.currentFrame, 0);
        lottie.play();
      }}
      src="https://lottie.host/63e43fb7-61be-486f-aef2-622b144f7fc1/2m8UGcP8KR.json"
    />
  );
};

Labels

• Add the Type: Bug label to this issue.

[maxrchung]

Add the Type: Bug label to this issue.

I don't think I have permissions to add bug label.

[maxrchung]

@theashraf I see there is a PR merged to handle this. But as far as I can tell from the notes, it only handles the case if start index is less than end index. What about these situations?

• Over total frames setSegment(100, 150) when total frames is 60
• Negative index setSegment(-5, -1)

[github-actions]

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.