How can I make the lottie animation embeds in Webflow full screen and responsive like this example codepen.io?
To make Lottie animations embeds in Webflow full screen and responsive, you can follow these steps:
1. Prepare your Lottie animation file: Before embedding the animation, make sure you have an optimized and appropriately sized Lottie file.
2. Upload the Lottie file to Webflow: In your Webflow project, go to the Assets panel and upload the Lottie file. This will make it available for use in your project.
3. Add a Lottie embed: Drag and drop an Embed component onto your web page where you want the animation to appear. In the Embed settings, choose "Custom Code" and paste the Lottie embed code.
4. Set up the Lottie embed code: The Lottie embed code typically includes a JavaScript file and a div container. Modify the code to ensure it occupies the full screen:
```html
```
5. Style the Lottie container: To make the Lottie animation full screen, you can use CSS to set the container's dimensions. Add custom CSS code to your project or utilize Webflow's built-in CSS styles:
```html
```
This CSS code positions the Lottie container at the top left corner of the screen (`position: fixed; top: 0; left: 0;`), makes it occupy the full viewport width and height (`width: 100vw; height: 100vh;`), and provides a high z-index value to ensure it appears above other elements.
6. Make the Lottie animation responsive: To ensure the Lottie animation scales properly on different screen sizes, you can use CSS media queries and adjust the dimensions accordingly. For example:
```html
```
In this example, the Lottie animation container will occupy 100% width and 50% height on screens smaller than 767px.
By following these steps, you can create a full-screen and responsive Lottie animation embed in Webflow, similar to the example you provided on CodePen. Remember to adjust the code and styles according to your specific animation file and design requirements.