How can I make a Lottie animation fill the entire vertical container and align it to the right in Webflow?
- Set the container’s height (e.g., 100vh) and position to relative.
- Set the Lottie element's width and height to 100%, apply object-fit: cover, and use either Flexbox (justify: end, align: stretch) or Absolute positioning (top/right/bottom: 0) to align it right and stretch it vertically.
To make a Lottie animation fill the vertical container and align it to the right in Webflow, you need to adjust layout and sizing settings in the Designer.
1. Set the Container’s Height
- Select the parent container (div block, section, etc.) that holds your Lottie element.
- Under the Style panel, set the Height to a fixed value (e.g., 100vh for full screen height) or ensure it dynamically fills the vertical space you desire.
- Set Position to Relative if you intend to absolutely position the Lottie animation later.
2. Configure the Lottie Animation Element
- Select the Lottie animation in the canvas.
- Set Width and Height to 100% so it fills its parent container.
- Make sure the parent container allows the Lottie element to grow: no overflow constraints or limiting padding/margins.
- Under Object Fit, choose Cover to preserve aspect ratio while filling the container fully (under the Layout section).
- Optionally set Position: Absolute, followed by:
- Top: 0
- Right: 0
- Bottom: 0
- This pins the Lottie to the right and stretches it vertically.
3. Align the Lottie to the Right
There are two options:
Flexbox Method:
Set the parent container's Display to Flex (Direction: Horizontal).
Set Justify: End and Align: Stretch.
The Lottie will align right and expand vertically.
Absolute Positioning (if used in Step 2):
You already aligned it to the right using Position: Absolute.
Ensure the parent has Position: Relative to anchor the child correctly.
4. Make Sure Lottie Animation Rescales Properly
- In the Lottie element settings, ensure Preserve Aspect Ratio is not locking the size scaling.
- If using SVG-based Lottie, confirm it scales responsively by setting Width and Height to 100% and using object-fit: cover.
Summary
Set the Lottie container height (e.g., 100vh), ensure the Lottie element is sized to 100% width and height, use Flexbox or Absolute positioning to align it right, and apply object-fit: cover to ensure it resizes with the container while maintaining design quality.