How can I implement a full page lottie animation with Webflow that maintains its aspect ratio regardless of the viewport size? I have already tried using "object-fit: cover" but it didn't solve the issue. I found that I need to use the parameter "rendererSettings:{ preserveAspectRatio:'none' }" in Bodymovin, but I'm not sure how to implement it while still using the Webflow interface for lottie animation. Any suggestions?

Implementing a full-page Lottie animation that maintains its aspect ratio can be challenging if you're working directly with Webflow's built-in interface. However, you can achieve the desired effect by making some adjustments both in your Webflow project and Lottie settings.

​

1. Set Up Your Webflow Project

• Import your Lottie animation into Webflow by dragging your animation into the Assets panel or using the “Add Lottie Animation” option.
• Add the Lottie animation to your desired section or a new div block that will act as the full-page container.

​

2. Adjust Webflow Design Settings

• Set the div block or section containing your animation to a full width and height. Use 100vw for width and 100vh for height to ensure it covers the full screen.
• Ensure the parent element has a relative, fixed, or absolute position, and set the Lottie animation inside to position absolute with width and height set to 100%.

​

3. Modify Lottie Settings for Aspect Ratio

• While Webflow's interface does not directly support rendererSettings configurations like { preserveAspectRatio: 'none' }, you can achieve a similar effect by ensuring the parent container resizes the content to its full dimensions.
• Use CSS transformations and scale settings in Webflow’s Style panel to adjust the animation's scaling, if needed.

​

4. Fine-Tune with Custom Code (optional)

• If you need to use advanced Lottie player settings, adding a custom code component to your Webflow page will be necessary. 
• In the “Before Body tag” section of your project settings, include a custom script to configure the Lottie with rendererSettings if you have direct access to the animation’s JS setup code outside of Webflow.

​

Summary

To implement a full-page Lottie animation in Webflow while maintaining aspect ratio, ensure your animation container spans the full viewport using width and height in VW/VH units. The challenge of using { preserveAspectRatio: 'none' } directly in Webflow can be circumvented by manipulating design settings and positioning within your project to achieve the desired scaling effect. For additional settings, custom code may be needed.