I’ve added a Lottie animation to my website. I want the animation to always fill the entire container vertically and then to align to the right part of the container.
If I set height to 100% and width to auto, the container does not resize, but the animation stays at 300px. If I set both to 100%, I get the proper size, but I can’t manage to align it to the right. Flex or float does not work. After some research I stumbled upon a thing that should work, that’s a preserveAspectRatio attribute. If I apply “xMaxYMid meet” in Chrome inspector I get the desired result, but I have no idea how to apply this attribute to Webflow Lottie element.
I think you can’t align your lottie div to the right because you have padding of 30 on all sides on the parent element div-head-left. I think if you delete the padding on the right you will be able you align your lottie div to the right. I hope this helps.
I see @zorandukic, I didn’t understand your question initially. To be clear, you want the lottie to be 30 px fro the right and centered in the middle, right?
@Pablo_Cortes here’s a quick sketch - so I want Lottie to fill up the entire height of the div, aligning to the right and expanding to left proportionally.
Hey @zorandukic, the solution was simpler than I thought first, I tried many things and nothing worked, then I just selected the lottie animation, not the div lottie, and added padding to it. I used 215 but you can play with it. The padding also resized the height of the lottie animation but it wasn’t too drastic. Anyway, I hope this solves your issue, good luck. By the way the website is looking pretty good, good job.
glad you like the site tho!