# Issue when playing animation segments through javascript

**URL:** <https://forum.lottiefiles.com/t/issue-when-playing-animation-segments-through-javascript/103>\
**Category:** Lottie in Web\
**Created:** [July 28, 2020, 9:32pm UTC](https://forum.lottiefiles.com/t/issue-when-playing-animation-segments-through-javascript/103 "2020-07-28T21:32:31Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![artur.rozwalak](https://yyz2.discourse-cdn.com/flex030/user_avatar/forum.lottiefiles.com/artur.rozwalak/32/73_2.png) [@artur.rozwalak](https://forum.lottiefiles.com/u/artur.rozwalak)\
**Post date:** [July 28, 2020, 9:32pm UTC](https://forum.lottiefiles.com/t/issue-when-playing-animation-segments-through-javascript/103/1 "2020-07-28T21:32:31Z")

</div>

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 🙂

---

<div class="post-metadata">

**Author:** ![karam](https://yyz2.discourse-cdn.com/flex030/user_avatar/forum.lottiefiles.com/karam/32/256_2.png) [@karam](https://forum.lottiefiles.com/u/karam)\
**Post date:** [August 4, 2020, 6:49am UTC](https://forum.lottiefiles.com/t/issue-when-playing-animation-segments-through-javascript/103/2 "2020-08-04T06:49:05Z")

</div>

```
<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

> **[thirsty-hooks-2zsx2 - CodeSandbox](https://codesandbox.io/s/thirsty-hooks-2zsx2?file=%2Findex.html:409-820)**
>
> thirsty-hooks-2zsx2 by karamalie

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

---

<div class="post-metadata">

**Author:** ![artur.rozwalak](https://yyz2.discourse-cdn.com/flex030/user_avatar/forum.lottiefiles.com/artur.rozwalak/32/73_2.png) [@artur.rozwalak](https://forum.lottiefiles.com/u/artur.rozwalak)\
**Post date:** [August 4, 2020, 11:14am UTC](https://forum.lottiefiles.com/t/issue-when-playing-animation-segments-through-javascript/103/3 "2020-08-04T11:14:47Z")

</div>

Thanks Karam, I’ll try this way 🙂