How do I make a lottie animation take the full width and height of a flex container?

To make Lottie animations fill the full width and height within a Flex container, you can achieve this through several steps. Here are the specific steps and code examples:

1. Create a Flex Container

First, create a container using Flexbox layout, which will hold the Lottie animation.

html
<div style="display: flex; width: 100%; height: 100vh; align-items: center; justify-content: center;">
    <div id="lottie-animation"></div>
</div>

Here, the outer div serves as a Flex container, set to 100% width and 100vh height, with horizontal and vertical centering.

2. Set the Styles for the Lottie Animation Container

Next, set the styles for the Lottie animation container to ensure it fills the Flex container.

css
#lottie-animation {
  width: 100%;
  height: 100%;
}

This CSS ensures that the #lottie-animation element expands to fill all available space within its parent container.

3. Load the Animation Using the Lottie Library

Use the Lottie Web library to load and play the animation. Ensure you have included the Lottie library files.

html
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.5/lottie.min.js"></script>

Then, initialize the Lottie animation using JavaScript:

javascript
lottie.loadAnimation({
  container: document.getElementById('lottie-animation'), // Animation container
  renderer: 'svg', // Rendering method
  loop: true, // Whether to loop
  autoplay: true, // Whether to auto-play
  path: 'path/to/your/animation.json' // Animation file path
});

Example Explanation

In this example, I use a Flex container with 100% width and 100vh height to display the Lottie animation, which automatically adjusts to fill the container. By setting the inner div's width and height to 100%, the Lottie animation expands to fill all available space, achieving a full-screen effect.

Practical Application

In real projects, this approach is highly suitable for scenarios where animations need to occupy the entire screen or large areas, such as full-screen welcome pages or background animations. Leveraging Flexbox's capabilities, the animation adapts well to different screen sizes and orientations.

By following these steps, you can make Lottie animations adaptively occupy full width and height within any Flex container.