anim.call invoked after rendering
anishjana opened this issue · 1 comments
anishjana commented
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**
issue-label-bot commented
Issue-Label Bot is automatically applying the label bug
to this issue, with a confidence of 0.66. Please mark this comment with 👍 or 👎 to give our bot feedback!
Links: app homepage, dashboard and code for this bot.