Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Can't scale animation responsively on web

See original GitHub issue

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?

Issue Analytics

State:
Created 5 years ago
Comments:8

Top GitHub Comments

2reactions

james-brndwgncommented, Mar 7, 2019

@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

0reactions

bodymovincommented, Apr 11, 2020

@boraerbasoglu can you share an example?

Top Results From Across the Web

Scaling Responsive Animations - CSS-Tricks

Scaling our websites and applications so that they look great on every screen can be difficult. A big portion of that difficulty can...

Responsive animation size-ratio in a carousel - Stack Overflow

The reason why I cant scale it down is, because then the whole animation gets messed up, not to mention the mess it...

Responsive scaling not working on mobile - GSAP - GreenSock

Using iframe (like the example below) works great in responsive scaling of my animation in all desktop browsers I tried under OS-X and ......

Edge Animate to Animate CC: Responsive Scaling and ...

However – being able to scale and reposition elements within an Animate CC HTML5 Canvas document is absolutely possible. The main difference is ......

Getting an Animate .OAM file to scale dynamically/... - 11316188

In 'Publish Settings' I select make responsive and scale to visible area. I publish it as an .OAM. 1) I can't place it...