Issue when playing animation segments through javascript

hi guys,
I’m having problem with setting up lottie player on my website. On the click of a button I want to play specific segment of animation, but on first click animation is playing in full before playing selected segment, after that next click is doing what I expect and plays only the selected frames. Below you’ll find my configuration

<button id="button">Click me</button>

<lottie-player
  id="Lottie"
  src="animation.json"
  background="transparent"
  speed="1"
  style="width: 300px; height: 300px;">
</lottie-player>

<script src="lottie-player.js"></script>
<script>
    var lottiePlayer = document.getElementById('Lottie');
    var lottie = lottiePlayer.getLottie();

    var button = document.getElementById('button');
    button.addEventListener('click', runAnimation);

    function runAnimation() {
      lottie.playSegments([48, 72]);
    }
  </script>

I’d appreciate any help :slight_smile:

<script>
  window.addEventListener("load", function() {
    const lottiePlayer = document.getElementById("Lottie");
    const lottie = lottiePlayer.getLottie();
    lottie.goToAndStop(48, true);

    const button = document.getElementById("button");
    button.addEventListener("click", function() {
      lottie.playSegments([48, 72], true);
    });
  });
</script>

Attaching a codesandbox for you to play with as well

Add the methods inside a DOM loaded event as well as add a second parameter to playSegments method as true. This is a frame=true flag which specifies that the provided array contains frames.

Hope this helps : )

Thanks Karam, I’ll try this way :slight_smile: