Lottie animation container height

Hi webflow peeps,

I have finally made my first lottie animation and I have a small issue I can’t seem to find the problem to. I use flexbox for the hero section and I put the animation next to my intro info in the header. When the page loads, the animation takes a second or so to appear. So the text in the div on the left first appears on top, then jumps down when the animation starts. Same problem on mobile, where the animation should show first, but it always take a short while to start, therefore the next div is shown on top of the page and it jumps down as the first image of the animation appears. it’s very annoying because the user can actually already start reading the text when the animation kicks in. I would like to have kind of a place holder that shows the container on screen before the animation starts. Do you guys have any ideas?

Here’s the link: https://preview.webflow.com/preview/portrait52?utm_medium=preview_link&utm_source=dashboard&utm_content=portrait52&preview=8969544d896543da91d88f806e841686&mode=preview

Thanks for your help!
Alice