Lottie not filling div within panel

So, this is a basic thing that I can’t seem to find any documentation on. I’m placing a lottie animation within a panel, within a div, however the lottie animation won’t scale to fill the panel. I don’t want to change the dimensions of the animation. Simple hide the overflow of the edges so I can ‘crop’ in etc.

I’m sure there is a very simple solution to this.


Here is my site Read-Only: Webflow - Quench

Hello Henry,

The solution isn’t as simple as it may be assumed. The reason for that is that the lottie animation is a flex child, and that automatically imposes some extra styling to it.

Here’s a solution that I believe should work pretty well.

  1. Double click on the lottie animation in the designer and render it as an SVG

image

  1. In the lottie animation styling, change flex-growth to none

This should fix the problem. However, you’ll notice that it doesn’t look so good since it’s completely shifted to the left.

  1. To solve that, go to the lottie’s parent element ‘.Div Block 18’ and justify items to center

Hope this solves your issue!

2 Likes

This worked perfectly, thank you so much @bavshehata really appreciate the help with this one. Cheers.

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.