fabricjs animation to video

[munge]

Hi, i`m trying to convert fabricjs integrated animation to video, but cant find solution how to do it, also how to configure video timing

[issue-label-bot[bot]]

Issue-Label Bot is automatically applying the label question to this issue, with a confidence of 0.68. Please mark this comment with :thumbsup: or :thumbsdown: to give our bot feedback!

Links: app homepage, dashboard and code for this bot.

[usama-gh]

Code for reference.

 */
app.post('/test', (req, res) => {

    if (!req.body.canvasJSON) {
        res.send({
            status: false,
            message: 'Provide Canvas JSON!'
        });
        return;
    }

    VideoEncoder(res, req.body.canvasJSON);
});

const VideoEncoder = async (res, canvasJSON) => {
    try {
        const stream = await renderer({
            silent: false,
            width: 1920,
            height: 1080,
            fps: 30,
            makeScene: (fabric, canvas, anim, compose) => {

                // console.log("canvas json: ", canvasJSON);

                let label = '';
                for (let i = 0; i < canvasJSON.objects.length; i++) {
                    if (canvasJSON.objects[i].type == "textbox" && canvasJSON.objects[i].name && canvasJSON.objects[i].name == "quotetext") {
                        console.log(`${i}: ${canvasJSON.objects[i].name}`);
                        label = canvasJSON.objects[i].text;
                    }
                }

                var text = new fabric.Text(label, {
                    left: 400,
                    top: 400,
                    fontSize: 100,
                    fill: "#f99339",
                    angle: 0,
                });
                canvas.add(text);
                anim.to(text, {
                    duration: 10,
                    angle: 360,
                    ease: Power3.easeOut,
                });
                compose();
            },
        });

        const output = await encoder({
            silent: false,
            frameStream: stream,
            output: "../front/output/test.mp4",
            fps: {
                input: 30,
                output: 30,
            },
        });
        console.log("process done,", output.path);
        res.send({
            status: true,
            message: JSON.stringify({ path: output.path })
        });
    } catch (e) {
        console.log("error", e);
    }
};

[usama-gh]

Fabricjs Animate functions doesn't work. Only GSAP works.Is there any way we can get fabricjs animation working as well?

[drcivan]

Please take a look at the renderFrames() method in renderer.ts The method makes use of gsap.ticker and TimelineMax.progress() functions to create a virtual animation timeline and capturing the animation frame by frame without rendering to a browser window.

I'm not familiar with fabricjs animations. If it's possible to implement the same behavior with fabricjs, you may alter the renderFrames() method with something like fabric.util.requestAnimFrame and give it a try. Adding support for fabricjs animations is not on our roadmap for now.