rahulv21

const renderer: Renderer = (config) => new Promise((resolve, reject) => { try { const { width, height, fps, makeScene, silent = true } = config; const canvas = new fabric.StaticCanvas(null, { width, height }); const anim = new TimelineMax({ paused: true }); const stream = new Readable(); typeCheck(reject, config); let totalFrames: number; let currentFrame = 0; gsap.ticker.fps(fps); const renderFrames = () => { anim.progress(currentFrame++ / totalFrames); if (currentFrame <= totalFrames) { canvas.renderAll(); const buffer = Buffer.from( canvas.toDataURL().replace(/^data:\w+\/\w+;base64,/, ""), "base64", ); stream.push(buffer); renderFrames(); } else { stream.push(null); resolve(stream); } }; makeScene(fabric, canvas, anim, () => { const duration = anim.duration(); console.log({"totalDuration":duration}); totalFrames = Math.max(1, Math.ceil((duration / 1) * fps)); renderFrames(); }); } catch (e) { reject(new Error("An error occured in the renderer.")); } }); import { renderer, encoder } from "@pankod/canvas2video"; import { Power3 } from "gsap"; const helloWorld = async () => { try { const stream = await renderer({ silent: false, width: 1920, height: 1080, fps: 30, makeScene: (fabric, canvas, anim, compose) => { const text = new fabric.Text("Hello world", { left: 400, top: 400, fontSize: 100, fill: "#f99339", angle: 0, }); canvas.add(text); anim.to(text, { duration: 1, angle: 360, ease: Power3.easeOut, delay:"2s" }); compose(); }, }); const output = await encoder({ silent: false, frameStream: stream, output: "output/hello-world.mp4", fps: { input: 30, output: 30, }, }); console.log("process done,", output.path); } catch (e) { console.log("error", e); } }; helloWorld(); Hey guys try to create a small package using gsap and Fabric js which can create dynamic video from canvas on the server side. package is inspired by click here . TimelineMax is used for creating a time frame for all transition, i want to give dynamic delay for the animation of fabric js component, but the problem is ``delay , pause , resume functions of timelinemax are aren't working, the delay properties are in consistence. i have tried using e.g:- anim.from("component",{left:0,opacity:0,delay:"2.3"}); anim.from("component",{left:0,opacity:0},"+=2.3"); in above cases delay was greater than 2 seconds please help.