Streaming live at 10am (PST)

Lottie alignment and sizing

Hello,

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.

Thanks!

Here is my site Read-Only: https://preview.webflow.com/preview/mst3?utm_medium=preview_link&utm_source=designer&utm_content=mst3&preview=85ed076a89fb6ed7cd12003330c07db3&mode=preview

Hello @zorandukic,

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.

Thanks @Pablo_Cortes,
I would like to align to those 30px on the right :slight_smile:

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.

lottie

hope it helps!

Hello @zorandukic do you mean something like this?

@Pablo_Cortes Exactly like that! thanks
what’s the trick?

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.

@Pablo_Cortes thanks for the effort, but using fixed padding doesn’t work well for responsive :cry: glad you like the site tho!

@zorandukic yes I thought of that too, but you can change the padding on the different break points to work on mobile devices.

@Pablo_Cortes unfortunately it wouldn’t even display properly on a few desktops with different aspect ratios

I see @zorandukic, I hope you find a better answer. Please let me know if you do, I’m kind of curious as to how to fix this. Take care.

2 Likes

Same problem here.
When i change the size in the animation container nothing happens :frowning:
how can i change the size for tablet and mobile?

Thanks a lot!

https://preview.webflow.com/preview/dynght-v6?utm_medium=preview_link&utm_source=designer&utm_content=dynght-v6&preview=db3012f5c2252339fa7a3558e890fda8&mode=preview