anim.call invoked after rendering

The below is loading the fabric objects to the canvas using Fabric.util.enlivenObjects :

    makeScene: (fabric, canvas, anim, compose) => {
                let animation = template[0]["animation"];
                canvas.setZoom(1.5);
                canvas.backgroundColor = "#ffffff";
                canvas.renderAll();
                fabric.util.enlivenObjects(template[0]["objects"], function (objects) {
                    objects.forEach(function (o) {
                        canvas.add(o);
                        const index = validateObject(o.id, animation);
                        if (index !== -1) {
                            anim.call(animations[animation[index].animation], [canvas, o, 1],1);            
                        }
                    });
                    canvas.renderAll();
                    compose();
                });
            },

the anim.call is used to attach unique gsap code to that object. animations[animation[index].animation] is the variable where the functions are store for example;

const animations = {
    fromRight: (canvas, obj, time) => {
        obj.opacity = obj.originalOpacity;
        var l = obj.get("left");
        gsap.from(obj, {
            left: l + 100,
            opacity: 0,
            duration: time,
            onUpdate: () => canvas.renderAll(),
        });
    },
    fromLeft: (canvas, obj, time) => {
        obj.opacity = obj.originalOpacity;
        console.log("invoked now",obj.originalOpacity)
        var l = obj.get("left");
        gsap.from(obj, {
            left: l - 100,
            opacity: 0,
            duration: time,
            onUpdate: () => canvas.renderAll(),
        });
    },
}

However when i run npm . the anim.call is invoked after 100% of progress.

Rendering | ████████████████████████████████████████ | 100% **invoked now 1**

pankod / canvas2video

anim.call invoked after rendering #18