Can't scale animation responsively on web

[j-low]

I'm trying to implement a number of AE-exported animations. I can get them to render on the page without issue but I'm having extreme difficulty finding a way to scale them based on container or screen width while preserving their aspect ratio.

The best I can find are some mentions of preserveAspectRatio and scaleMode under rendererSettings in the README and on StackOverflow but nothing indicated there has any effect on scaling. I can't locate any documentation of the options.

Can you give me some insight as to how I can achieve responsive scaling?

[bodymovin]

hi, what is it exactly you're expecting to happen? As a rule of thumb, you should consider the svg as an image tag with a fixed width and height that scales according to the container.

[james-brndwgn]

@bodymovin is it possible to scale an animation while preserving aspect ratio when using the html renderer? E.g. as the browser window resizes the animation will scale with it

[bodymovin]

@james-brndwgn you will need to call the resize method of the animation instance manually every time the window resizes.

[james-brndwgn]

@bodymovin Ok, thank you. Can you point me to the documentation on this? I can't seem to find it: http://airbnb.io/lottie/web/getting-started.html

[Jasbir23]

@bodymovin What does resize method mean ? If using html renderer, how do I resize all elements to fit a given container style ? Changing parent styles did not help and could not find any resize method inside the lottie object.

[bodymovin]

@Jasbir23 you can call resize on the animation instance itself. If the container changed it's size, it will recalculate the correct measurements to behave as the svg property preserveAspectRatio with a value of xMidYMid meet

[boraerbasoglu]

same problem here doesn't play on responsive and hides SVG on fail

[bodymovin]

@boraerbasoglu can you share an example?