Streaming live at 10am (PST)

Responsive full screen Lottie animation (keep Aspect Ratio)

Hey Webflowers!

In my quest to get a responsive full screen Lottie animation that keeps the right aspect ratio, I suddenly discovered this code: window.Webflow.require("lottie").lottie.resize();

The code resizes the Lottie viewbox to fit the parent container. By using this and data-preserve-aspect-ratio, we should be able to make a full screen responsive Lottie Animation! :raised_hands:

SHARE-ONLY

LIVE SITE

Step 1: MAKE LOTTIE CONTAINER FULLSCREEN

Add height: 100vh and width: 100vw to your Lottie container or a parent element. In my example I have a parent container that fills the screen and then I use 100% in both height and width on my Lottie containers.

Step 2: ADD CUSTOM ATTRIBUTE
image
Awesome, your Lottie animation should now fill the whole viewport. Next go into your animation settings and add this custom attribute: data-preserve-aspect-ratio ="xMidYMid slice".

The animation should cover the whole container and preserve the aspect ratio just like with a SVG.

Step 3: ADD CUSTOM ON RESIZE CODE
Now we can add some custom code, to resize the inner Lottie animation, when the window resizes. Add the following to the before </body> tag custom code section:

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


All your lottie animations should now resize accordingly.

Let me know if this worked for you :blush:

4 Likes

Hello @Davidlin_ch12,

Thanks for sharing. Cool website, made me want to buy one of those skateboards!

1 Like

Thanks Pablo :smiley:

@Davidlin_ch12 you are the MAN! Stumbled around forever trying to figure this out until I found this. Thanks!

1 Like

@Davidlin_ch12 Followed your direction, but any idea why my Lottie video is flickering on mobile? Here’s my page on staging. The render mode is set to Canvas (read that tip here, but it didn’t fix it)

Hey Jon

Your link leads to a 404. Could you update that and if possible send some screenshots of the issue. Then I’ll check if I can help out in any kind of way :blush:

Gah, sorry David, I had just set it to draft to publish an update live. Here you go: https://nautoinc.webflow.io/product/predictive-collision-alerts

I’ve been diagnosing it and I believe it was simply the rendering mode, once I set it to Canvas from SVG the flickering stopped.

Jon-circle-signature.jpg

2 Likes