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.
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.
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: