Lottie-web: playSegments function plays the whole animation

[michaelgrc]

Hi there,

I'd like to play only a part of frame of my animation but when I use the playSegments function, it plays all the frames.
I also checked the id and op value, and it seems correct (id = 0 & op = 111.000004521123)

Here's my code and my data.json file.

Does anyone have an idea ? Many thanks

var container = document.getElementById('container');
var animData = {
        container: container,
        renderer: 'svg',
        loop: false,
        prerender: false,
        autoplay: false,
        autoloadSegments: false,
        path: directory_uri+'/js/data.json'
    };
anim = bodymovin.loadAnimation(animData);
anim.playSegments([0,20],true);

data (1).json.zip

[bodymovin]

try hooking to the "DOMLoaded" event before setting the new segment, or it will be overriden once the animation data loads.
That should solve it.

[michaelgrc]

It solved it indeed !
Many thanks bodymovin master :)

[tristanleboss]

That's 110% unintuitive! How many people ended on this page or on #398 ...

Nothing can be done to automaticaly preserve this setting once animation is loaded?

[GreenMonkeySaveEarth]

@bodymovin Follow up questions on this.

1. Is there an easy way to play part of the animation by using progress rather than frames. like in iOS library. animationView.play(fromProgress: 0.25, toProgress: 0.5, withCompletion: nil) ref
2. If it is not available, is there a handy function converting between frame and progress?
3. What's the best practice/example when playing a part of the animation and wait for click/action to trigger the other part of the animation?

Thanks a million in advance.

[bodymovin]

@GreenMonkeySaveEarth

1. on web, the duration of the animation is virtually infinite. It takes AE workspace as the initial playing segment but then you can customize it to play any other part of the comp. You can even set negative values as initial and end frames. When setting progress in percentages, as it is right now, it would be a percentage of a segment [-Infinity, +Infinity]. Adding percentage as another constrain of the segment to reproduce is possible, but I'd rather not add it to the main player. It can be easily built on top of it rolling a custom ticker.
2. Answer 1 should also answer this. Converting frame to progress would mean using [-Inifinity,+Infinity], or current segment or original segment? It probably depends on each case.
3. I'd say that the best way to do it is using playSegments.

[charlesanim]

It solved it indeed !
Many thanks bodymovin master :)

Can you post your solution here if you don't mind? I'm having this same issue.

[mattlindsay]

What am I doing wrong?
The entire animation timeline plays. I am trying to loop the the last segment only..
My code as follows:

lottie.loadAnimation({
container: document.getElementById('lottie'),
renderer: 'svg',
loop: true,
autoplay: true,
//autoloadSegments: false,
path: 'data.json'
})

var anim;

anim.addEventListener('DOMLoaded',function(){anim.playSegments([0,20],[21,89], true);})