Lotties loop even when `loop` set to `false`

[dslovinsky]

Expected behavior

When loop={false} is set on the player, the animation will play once then stop.

    <dotlottie-player
      autoplay
      loop={false}
      src="animation.lottie"
    />

Actual behavior

The behavior of loop={false} is identical to that of loop={true} - the animation will continue playing indefinitely

This is not the case when loop is not set or is explicitly loop={undefined} in which case the animation will stop on completion as expected.

CodeSandbox

[samuelOsborne]

Hi @dslovinsky I'll fix this, in the mean time if you remove the loop prop entirely it should stop looping.

Cheers

[darlysson]

Just to add that this is still not working. Also removing the loop prop doesn't make it stop.

[dslovinsky]

Just to add that this is still not working. Also removing the loop prop doesn't make it stop.

@darlysson Have you tried explicitly setting it to undefined?

[darlysson]

@darlysson Have you tried explicitly setting it to undefined?

That's the only way it works! :) Thank you @dslovinsky

[samuelOsborne]

Currently lit-element disregards the value you set to a boolean attribute and sets it to true if it's present on the element. So writing loop={false} won't actually set it to false. Using React, the only way I found like you've also shared to make sure the attribute isn't put on the element is to set it to null or undefined:

export default function App() {
  const loop = null;

  return (
    <>
      <dotlottie-player
        autoplay
        controls
        loop={loop}
        src="animation.lottie"
        style={{ width: "250px" }}
      />
    </>
  );
}