So I am using a lottie on a website I’m building and everything seemed to be working perfectly until I checked it on iPhone and noticed flickering, I found out through the website that I had to change the setting from SVG to CANVAS. However when I do this it completely changes the ratio that I created the Lottie in (square) to a very widescreen one, this causes for the animation to become way too small to view on a mobile screen. Where am I going wrong? Is it something I have to change in the lottie file?
Hey Martine, did you find a way to work this out? I’m still looking for a solution. I tried some custom code on attributes (data-preserve-aspect-ratio) but it made the Lottie to scale and now it’s cropped somehow!
Recently I rad into this issue dealing with Lottie animations rendered using the Canvas renderer option. It was adding extra height and messing up the aspect-ratio of the animation in comparison to the SVG renderer option. We solved the issue by setting the ‘aspect-ratio’ CSS property which seems to render the Canvas option with the proper aspect ratio now. Here was the solve.
// CSS
.canvas-item {
aspect-ratio: calc( 282 / 83 ); <!-- width / height value of the Lottie animation -->
width: 100%;
height: auto;
}
This also works responsively. The key is to calculate the aspect-ratio value. You can access these values inside each Lottie .JSON object by pathing to “w” and “h” if you were thinking about calculating these dynamically and not hard coding.