Lottie Animations Full screen

Hi, I am trying to use the new lottie animation embeds but need to make them full screen and responsive like this example:

I can’t work out how to make it like this, I think I need to change the preserveAspectRatio for it, but am unsure how to do it.

Site in question here:
https://steven-titchener.webflow.io/

THANKS!

In After Effects, when you call the Bodymovin Plugin for the json export, you can open Settings inside of the dialog, and turn preserveAspectRatio to OFF.

1 Like

I don’t know if it has been updated or I’m doing something wrong but I can’t see any settings to change the aspect ratio in Bodymovin?
I’ve tried all of the dropdowns…

I agree with you, I have the same problem and I can’t find such settings.

1 Like

You can change these setting from the svg renderer. You’ll have to use the good old script to control this.

2 Likes

Thanks! That’s what I thought I needed to change, but I don’t know what script to use?
Because if you use the built in Webflow Lottie thing, how do I then change the aspect ratio in script?

Like how do I identify that animation for it to change the aspect ratio?

Thanks!

I tried this, but it didn’t work:

<script>
function SVGRenderer(animationItem, config){
		this.renderConfig = {
        preserveAspectRatio: 'none',
        imagePreserveAspectRatio: 'none',
		}
};
</script>

Cannot work out what should be doing.

Hi, try this script in the custom footer code, you’ll need to host the json file somewhere though.
Edit: Actually you can host it on Webflow now.

<script>
var loader = document.getElementsByClassName("lottie-1");
function loadBMAnimation(loader) {
 var animation = bodymovin.loadAnimation({
   container: loader,
   renderer: "svg",
   loop: true,
   autoplay: true,
   path: "url_path",
   rendererSettings: {
  	preserveAspectRatio: 'none'}
 });
}

for (var i = 0; i < loader.length; i++) {
 loadBMAnimation(loader[i]);
}
</script>

Let me know if you have success with it.

You also need to initiate lottie.js with the following code into the custom head code:

<script src='https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.5.0/lottie.js'></script>

Edit: Tested, it’s working!

Thanks @ ColibriMedia, but when you refer to the “good old script”, what do you mean?!? I am using After Effects and I am using the plugin “Bodymovin”. Are you saying a previous version of the plugin?

Hi @rafdesign,

Before Webflow implemented lottie.js such as it is now. You had to add the script in the custom code. But as there is no option for preserveAspectRatio yet, you need to use that script unless someone has a solution to force preserveAspectRatio on the Lottie component.

By the way, after testing, I was unsuccessful when the json is hosted on Webflow. I could only make it work when hosted on github. Weird.

Here is a tut for the old way of doing lottie.

That’s what I’m looking for. Someone must know!

Here is the project I’m working on if that helps:
https://preview.webflow.com/preview/steven-titchener?utm_medium=preview_link&utm_source=dashboard&utm_content=steven-titchener&preview=d225c1dea40d8f9a0089bbf224cc9a66&mode=preview

I have got the answer - @sabanna helped in another Webflowers thread

Works a treat.

1 Like