Bug: Animation with multiple segments loops the last segment only

[furedal]

I have an animation that is made in 3 steps.

1. Animate in - [0, 16]
2. Loading - [[16, 40], [40, 16]]
3. Animate out - [40,60]

The intention is to have the Loading segments looping so the playing frames would be like this: 16 -> 40, 40 -> 16, 16 -> 40, 40 -> 16 etc...

However, for some reason only the last segment is being looped so the resulting animation looks like this: 16 -> 40, 40 -> 16, 40 -> 16, , 40 -> 16 etc...

I have seen some posts where this seems to be a known behaviour, but I wonder if this isn't a bug? If this is not a bug, what is the intended way to make such a loop?

I am using Lottie-web: 5.12.2 Lottie-api: 1.0.3

[lxrcan]

not sure what is going on without seeing it myself.

when i have an issue like this, I start by making a super simplifed asset and trying that to rule out a few things. here is a a test i made which i think follows your timeline description; loading_lorcan.json

if you try to play that and it doesnt work there is something wrong with how you are trying to play the segments in a looping order... if it does work, there is something wrong with your asset formatting perhaps.

im afriad i cant help without seeming more.

[furedal]

Here is a super simple fiddle: https://jsfiddle.net/1cokazu2/2/

The animation should be going forward (segments 10-60) and then backwards (segments 60-10) in a loop. But after it has gone through both segments it starts looping the last segment only.

[lxrcan]

mmmm, ok. i see!

so looking at your code, i can see it is working as expected and playing the segments you request and then falling back to its loop behaviour.

what you want to do it to catch the end of your segment playback, then run the same segment function again. dont rely on the default loop at all.

this code got my loading animation working as you are hoping for:

let anim = lottie.loadAnimation({
        container: document.getElementById('anim'), // the DOM element that will contain the animation
        renderer: 'svg', // Render type: 'canvas', 'html' or 'svg'
        loop: false, // Disable default looping
        autoplay: false, // Control if the animation starts playing as soon as it is loaded
        path: 'loading.json', // the path to the animation json
      });
      
      anim.addEventListener('DOMLoaded', () => {
        anim.setSpeed(0.5); // Set the playback speed
        playCustomSegments(); // Initiate custom segment playback
      });
      
      function playCustomSegments() {
        anim.playSegments([[16, 40], [40, 16]], true);
      }
      
      anim.addEventListener('complete', () => {
        playCustomSegments(); // Replay the custom segments once they finish
      });

[furedal]

Yea this is kind of how I am doing it right now. But this feels that it shouldn't be needed, is lottie-web really working the intended way? This seems more like a bug

[lxrcan]

understandable, i wouldnt be thinking to differently from yourself.

but yea, after poking around i think i see the sense behind it... your example only created a function with the instruction to play 2 segments, without defining any new loop behavior, so it seems like correct behavior to me as it stands.

Perhaps the play segment method should have a setting for overriding the loop behavior of set to true? But I could see this getting very messy with complex Lottie’s using multiple loop sections.