Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

anim.call invoked after rendering #18

Open
anishjana opened this issue Oct 16, 2020 · 1 comment
Open

anim.call invoked after rendering #18

anishjana opened this issue Oct 16, 2020 · 1 comment
Assignees
Labels
bug Something isn't working

Comments

@anishjana
Copy link

anishjana commented Oct 16, 2020

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 issue-label-bot bot added the bug Something isn't working label Oct 16, 2020
@issue-label-bot
Copy link

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.

@drcivan drcivan assigned drcivan and omeraplak and unassigned drcivan Oct 24, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

3 participants