Lottie doesn't work on full screen

Design help General
1

Hi guys. I have a strange problem. I’m trying to make a page transition, and I have a Lottie in my transition. It’s basically a 100vw, 100vh wrapper, and Lottie is at the bottom. Lottie makes it look like some custom shape and not just a square moving up. Anyway, animation is working perfectly on all screens except 1920px. I tried all the random things that you can adjust, but I couldn’t fix it.

Is there maybe some reason why Lotties don’t want to work on full screen? And also, I tried removing all the code because this animation has some custom code, too, and it didn’t help.

READ-ONLY LINK:
https://preview.webflow.com/preview/moonflow?utm_medium=preview_link&utm_source=designer&utm_content=moonflow&preview=d042eb0ecdd072f63f87e4fca3b3c3aa&workflow=preview

And I forgot one more thing. I have a lot of errors, as you can see. I wanna disable landscape mode. I tried 6, 7 different types of codes: meta tags, disabling with media queries, rotating content when people rotate their phones, and I can’t even remember all the things. Anyone has an idea how I can do this?

2

Just bumping this up

3

Hey - did you solve this - I have the same issue

4

@danielcobb I know it’s too late now, but I deleted the whole section. Couldn’t find the solution. Did you solve the problem?

5

I did yes - in the Lottie file settings add this attribute:
data-preserve-aspect-ratio=“xMidYMid slice”

And add this to your body tag:

<script>
var Webflow = Webflow || [];
Webflow.push(function() {
	window.addEventListener('resize', function() {
	    window.Webflow.require("lottie").lottie.resize();
	});	
});
</script>

And make sure your Lottie or Lottie wrapper is set to 100% width, not 100VW width