juliangarnier / anime

JavaScript animation engine
https://animejs.com
MIT License
49.7k stars 3.67k forks source link

anime.timeline() calls update() multiple times #831

Closed manake closed 1 year ago

manake commented 1 year ago

I have roughly such code:

var obj = {
    something1: 0,
    something2: 0,
};

var timeline = anime.timeline({
    targets: obj,
    duration: 1000,
    update: function(anim){
        console.log('timeline update');
    },
});

timeline.add({
    targets: obj,
    something1: 1,
    duration: 1000,
    update: function(anim){
        console.log('animation 1 update');
    },
}, 0);

timeline.add({
    targets: obj,
    something2: 1,
    duration: 1000,
    update: function(anim){
        console.log('animation 2 update', anim.progress);
    },
}, 0);

And I wonder why callbacks are duplicated like this (with just var animation = anime({ ... }); they are not duplicated):

timeline.seek(995.2347826089548)
animation 1 update
animation 2 update 99.52347826089549
timeline update
animation 2 update 99.22921739130435 <-- Why duplicated? + A mid-value that I never provided in seek()?
animation 1 update <-- Why duplicated?
timeline update <-- Why duplicated?

timeline.seek(998.1913043480856)
animation 1 update
animation 2 update 99.81913043480856
timeline update
animation 2 update 99.52466086956521 <-- Why duplicated? + A mid-value that I never provided in seek()?
animation 1 update <-- Why duplicated?
timeline update <-- Why duplicated?

timeline.seek(1001.165217391175)
animation 1 update <-- Not duplicated. Ok.
animation 2 update 100 <-- Not duplicated. Ok.
timeline update <-- Not duplicated. Ok.

When they are duplicated then doesn't this trigger re-flow more times than necessary?

manake commented 1 year ago

Ok, I solved it.

I didn't set autoplay: false,.

I'm sorry for posting this.