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-titche…

[image] TwoGuysCreative: 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. In After Effects, when you call the Bodymovin Plugin for the json export, you can open Settings inside of the dialog, and turn preserveAspec…

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.

You can change these setting from the svg renderer. You’ll have to use the good old script to control this. [image] preserveAspectRatio - SVG: Scalable Vector Graphics | MDN The preserveAspectRatio attribute indicates how an element with a viewBox providing a given aspect ratio must fit…

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({ cont…

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, af…

[image] ColibriMedia: 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. That’s what I’m looking for. Someone must know!

Lottie Animations Full screen

Design help Custom code

TwoGuysCreative (steven.t@two-guys.co.uk) October 17, 2019, 2:39pm 13

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

Works a treat.

Topic		Replies	Views
Full Screen Lottie Transition Custom code	29	11950	July 16, 2020
Responsive full screen Lottie animation (keep Aspect Ratio) Webflow Tips	42	42517	September 24, 2024
Lottie Canvas Scaling issue General	4	5836	June 18, 2020
Lottie doesn't work on full screen General	4	814	November 3, 2023
Lottie Animation Custom code	10	5749	February 21, 2019

Lottie Animations Full screen

Related topics