Lottie Canvas renderer changes aspect ratio of Lottie

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?

This is the page: Characters | Hans Boodt Display Studio

This is the aspect ratio in svg modus:
Screenshot 2020-05-13 at 18.55.11

And this is in canvas modus:
Screenshot 2020-05-13 at 18.55.18

I also am looking for the solution for this! Did you end up figuring it out?

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!

1 Like

Hi there,

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;
}

// HTML

<div class="canvas-item">
	<lottie-player
		autoplay
		loop
		mode="normal"
		background="transparent"
		renderer="canvas"
		speed="1"
		preserveAspectRatio="xMidYMid meet"	
		src="my_animation.json"	
		>
	</lottie-player>
</div>

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.

Let me know if you have success!