Lottie Animation Won't Fill Div

Design help Animations & Interactions
1

I created a Lottie animation, which animates on scroll in my website. In the Lottie’s settings, I’ve switched the render to “Canvas”, instead of using the default “SVG” (this prevents flickering in Firefox browsers).

With the “SVG” render setting, the Lottie fills the parent div, however, with the “Canvas” render setting, the animation frame shrinks, always has a white border. I’ve tried to fix this using both Webflow and custom code without any luck.

Does anyone know how to make this Lottie completely fill the parent div (eg, in the same way that " background-size:cover" would work in CSS)? Many thanks for any advice!

Live Site: https://bridger-beta1.webflow.io/
Here is my site Read-Only: https://preview.webflow.com/preview/bridger-beta1?utm_medium=preview_link&utm_source=designer&utm_content=bridger-beta1&preview=00605746b580a9051e6db258748c3874&mode=preview

2

I am struggling with this same problem. Changing lottie from svg to canvas render changes the aspect ratio of the animation (the actual animation looks correct, it just appears to be placed in some kind of container.

Edit: I am an idiot, been struggling with it for 2 hours and solved it on my own 30 sec after asking for help. The div in which the lottie was placed was not the correct aspect ratio, I did not realize this because the lottie and div had the same background color.

3

Hi there - I am not sure about whether it will work with the canvas renderer - but it did with the SVG

go to the “lottie animation settings” and add a custom attribute

Name - data-preserve-aspect-ratio
Value - none

this will fill whatever div regardless of the ratio

3 Likes
4

@IVG perfect!! Thank you