Lottie Canvas Scaling issue

Hi everyone!
As using the canvas render method in Lottie for image sequences appears to be much better performance wise and works better on iOS and MacOS, it seems like the obvious choice.

Sadly though I’m having some scaling issues using canvas.
It simply doesn’t preserve the aspect ratio when scaling the browser.
Is it possible to achieve the same scaling as in svg, as that one does preserve it?

I’ve tried the following div attribute:
Name: data-preserve-aspect-ratio
Value: xMidYMid slice

This allows the image sequence to scale beyond the browser edge. At least in svg. It is ignored in canvas mode.

Thank you very much in advance!


Here is my public share link: LINK
(how to access public share link)

Sorry, I have to bump this but I really need help with this issue as I still can’t find any solution to the problem. And I’m not versed in code at all…

Maybe you can just use CSS to preserve the ratio of its parent. There’s a rule saying that a top or bottom padding expressed in % is actually relative to the width of the element. By fiddling around or using maths it’s quite easy to figure out how to respect the ratio of your Lottie anim.

Thank you for your response!
I’m guessing that you are referring to this kind of method?

I tried it and the lottie actually kept its aspect ratio but didn’t scale the way I would like it to.

I’m looking to make it fullscreen. Essentially just like 100% width&height div with an image set to cover.

Hey guys, try out this script from Sabanna. Unfortunately I only got it to work for svg render (my animation is therefore flickering) but at least the size works: