How do you loop a single segment and not all segments?

I have several icons that have an intro animation [0,20] where they get drawn in and a loop animation [21, 100] for when you hover over the icons. Setting loop to true will make all my segments loop which is not what I want, I only need one of the segments to loop. Anyway do this?

Here’s an example of how I have my code setup:

var data = {
          container: el,
          renderer: 'svg',
          loop: false,
          autoplay: false,
          path: 'data.json'
        };

var anim = bodymovin.loadAnimation(data);

anim.addEventListener('DOMLoaded', function(e) {
        anim.playSegments([0,20], true); // run intro animation
});

el.addEventListener('mouseover', function(e) {
        anim.playSegments([21,100], true); // run loop animation
});

[bodymovin]

To set a new segment you need to wait for the animation to be loaded, that’s why the first invocation isn’t working. you can use this.playButtonAnimator.addEventListener('DOMLoaded',()=>{}) For the rest of the issue, can you post a working implementation?

[bodymovin]

You can do anim.playSegments([[0,20],[21,100]],true) and it will loop only the final segment. You can also set directly the “loop” property to false/true on the animation instance.