Lottie Animation Won't Fill Parent Div

Design help General
1

I created a Lottie animation, which animates on scroll in my website. In this Lottie’s settings, I’ve switched the render settings 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 always has a white border. I’ve tried to fix this using both Webflow and custom code to no avail.

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

1 Like
2

Lotties are fixed sizes, I realized.

You have to give it a fixed width per device change.

Look at my website https://www.lifestyledq.com at the bottom to see what I mean. (I have pigeons).

You have to use fixed pixel widths. That’s really it.

Side note: what size is that lottie file? and how many frames? It was very fast, but I could see the lower res

3

Thanks for your thoughts.

As I have it now, it seems to scale fine with viewport size. I just can’t seem to get the image (with colored background) to fill out the div. It works great when the ‘SVG’ option is selected, but changing the rendering from ‘SVG’ to ‘Canvas’ is affecting it in some way which I can’t figure out.

The Lottie I have on there now is about 3.3M, composed of 114 frames.

4

Animated the BG color on scroll to change to the same color the background does

5

It’s a gradient hue, which is basically impossible to match to the jpg unfortunately.

6

Webflow has an eyedropper for colors.
It can work the same way- it’s very powerful. Try it!

1 Like
7

Hello @ryanInBoston,

You have a really cool lottie animation man it looks awesome. I think you can’t get the full width when using canvas because canvas maintains the aspect ratio of your animation. So try giving your lottie animation a width of 120%, it would look bigger but it will cover the full width. I hope this helps.

8

Thanks for the tip and the kind words! I’ll give that a shot.