Lottie-web: how to make the final width equal to the exact width of the animation

[ctf0]

for example
https://www.lottiefiles.com/61-octopus

the animation it self is 220 wide, while the svg is 800x600, this makes it very hard to reason about if we want to make the animation responsive to different screen sizes, specially if we have some text anywhere near the animation.

is there a way to achieve that through the api ? or maybe editing the json file directly ?

[bodymovin]

It's complicated to change the composition's size because all property values are relative to the original size.
The easiest way I can think of is to change the viewBox and preserveAspectRatio values after the animation is loaded.

[ctf0]

is there a formula to do that ? maybe a link to some guide that describe the process ?

atm a very hacky way would be resize the wrapper div with overflow hidden and scale the svg, but will fail big time if you have a text that needs to align with the animation.

[bodymovin]

I don't think there's a formula. It really depends on what you're looking for and the context of the animation.
I'd suggest that you try it to see if it fits your needs.

[ctf0]

okay, np, maybe u can tell me how would u achieve that with the above example so i can use it as a guide ?

[bodymovin]

What are you trying to achieve in the above example? do you have a more precise case somewhere to check out?

[ctf0]

this is the current with most of the examples on lottie, the animation is 800x600

this is the actually size of the animation which is what am trying to achieve instead of the above image

[bodymovin]

in the console set the svg parent's width to 220px;
and change the viewBox to "290 0 220 600"

[ctf0]

perfect, last question

• is there a way to change the viewBox through body movin ?

[bodymovin]

no, there is not at the moment

[ctf0]

😞 , okay thanx for all your help, appreciated 🏆