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
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.
- Double click on the lottie animation in the designer and render it as an SVG
- 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.
- To solve that, go to the lottie’s parent element ‘.Div Block 18’ and justify items to center
Hope this solves your issue!
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.