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:

EDIT 1: ONLY KEEP ASPECT RATIO SOLUTION (COURTESY OF @itsroberthimselfyo)

LIVE LINK (Try to resize both live links to see the difference)

If you only need to keep the aspect ratio of the lottie file, do the following:

  1. Make a parent div block and set the width: 100vw
  2. If you are using a 16:9 video, then set the height of the parent div block to - (100VW/16)*9 = 56.25, so height: 56.25vw.
  3. Give your parent div block a position other than static. (differs between use cases)
  4. Put the lottie inside the div block, set it to canvas, make it absolute and full screen.
  5. 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>
31 Likes

Hello @Davidlin_ch12,

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

3 Likes

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

This is awesome! Thank you so much!

1 Like

Worked for me, thanks a lot!

1 Like

This is a fantastic write-up & the code is spot-on: it worked perfectly!

These options should be included in Webflow by default: this is such a common use case.

4 Likes

Hello @Davidlin_ch12 ,

I implemented the code, it worked, but now it stopped working. Could you please inspect

And see why the lottie aspect ratio is changed each time the screen size is changed?

I have been trying to make it work for over an hour now.

Thanks!

Hey Jean-Paul,

Can you share your read-only link instead? I can’t access your site.

Hi @Davidlin_ch12,

Thanks for getting back to me. Appreciate the help!

Here is the read-only link: https://preview.webflow.com/preview/jps-cool-project?utm_medium=preview_link&utm_source=designer&utm_content=jps-cool-project&preview=4d3058293bdfd42d7042adda2f7df78d&pageId=5fdd2bcd63b242c36354ee07&mode=preview

Cheers,
JP

Hey Jean
It looks like you have added the custom code two times. Could you try to remove it from your project settings and only apply the custom code on a page basis? :slight_smile:

1 Like

Hey @Davidlin_ch12 , I could not find the duplicate code, but I deleted it out of the footer custom code section.

Not sure I have the code at all anymore implemented into the site.

1 Like


Here is what I am seeing on your staging site: https://jps-cool-project.webflow.io/

This usually means that the code has also been added to the project settings.

Please try deleting the code inside the footer code, then save the changes and publish.


Now go into each page with lottie animations and add the code inside of the pages custom code (see screenshot on original post) and publish again.

1 Like

@Davidlin_ch12 so I figured out the issue. It is set to canvas not SVG. Is there a way to make it work with canvas? As with SVG I get flickering on the scroll, with the canvas mode I do not.

Cheers,
JP

Hey JP,

It works with canvas and it is made specifically as a workaround to the way canvas normally behaves. Maybe there is something wrong with the implementation. If you can try from a clean sheet then maybe we can narrow down the issue. You can also try to add console.log("resizing"); inside of the addEventListener function. Then publish and check the console on the published site. If the message appears when resizing then it is probably working.

Hi @Davidlin_ch12,

Cleared all code. Inserted the new same code and added the new code you provided for eventlistener. In SVG it works perfectly but flickers on the actual site (not in preview though). Canvas does not resize properly and forces aspect ratio corrections.

I have noticed others in this thread with the same issue.

I even created a new page to test everything out. It is very specific to the CANVAS mode, which is what I need.

Not sure why this is not working… Again I appreciate your time and help. I would be more than willing to give you admin access to look, but not sure what else I can do at the moment. I am confident I have input everything correctly at this point.

Thanks,
JP

Hey @jpfaraj, I looked at your implementation. Please add the following code before the body tag in ALL your pages with lottie. (So both Home and Technology)

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

Your lottie settings look right and it looks like it is working in Home :smiley: