How to load multiple animation in on canvas at the specific point with specific size

[UsmanShafaqat]

i am using lottie in react js and i am facing issue for playing a animation at the specific point please help me in this

lottie.loadAnimation({ animationData: animationData, renderer: 'canvas', autoplay: true, loop: true, isSubframeEnabled: true,

        rendererSettings: {
            context: ctx,
            scaleMode: 'noScale',
            clearCanvas: true,
            preserveAspectRatio: 'xMinYMin meet',
            progressiveLoad: true,
        }
    })

[bodymovin]

hi, can you share more data on what the problem is?

[UsmanShafaqat]

i have multiple animations and i want all to play all of them in one canvas at a specific x y position how can i do it using lottie

[voytekhodaniil]

I have same question. I want draw lottie at specific position of canvas (Like ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) )

[voytekhodaniil]

Anyway I can propose this workaround

constructor(pos, data) {
    this.pos = pos
    const container = document.createElement('div')
    document.body.appendChild(container);
    this.lottie = Lottie.loadAnimation({
        animationData: data,
        loop: true,
        autoplay: true,
        renderer: "canvas",
        rendererSettings: {
            scaleMode: 'noScale'
        },
        container
    });
    this.img = container.querySelector("canvas");
    container.remove();
}
draw(ctx) {
    ctx.drawImage(this.img, this.pos.x, this.pos.y)
}

[UsmanShafaqat]

@bodymovin i am waiting for your answer..

[bodymovin]

if you control the canvas, you can execute your transforms on the canvas and then delegate control to lottie so it performs the drawing.

[UsmanShafaqat]

any code example please..

[UsmanShafaqat]

@bodymovin please help me out in this i need little code explanation how can i play multi animation in one canvas at diff axis. thanks in advance

[renatodolza]

@bodymovin please help me out in this i need little code explanation how can i play multi animation in one canvas at diff axis. thanks in advance

@bodymovin help us

[bodymovin]

@renatodolza can you share an example of where you are stuck?

[renatodolza]

I have at least 30 animations, see below an example with 3 animations simultaneously, being able to increase more depending on the need

I'm using it in SVG, I would like to do it in CANVAS