I am trying to implement a full page lottie animation to serve as a transition between loading pages… I rendered the animation from AE to json in 2560*1440 and it works as full screen when the viewport is in that type of aspect ratio however, if the viewport is different ratio, then the animation is scaled to preservice its aspect ratio…
I have tried to use “object-fit:cover” but that did not succeed in achieving the desired result.
I have found the following on Bodymovin’s github that I need to use the following parameter:
rendererSettings:{ preserveAspectRatio:'none' }
however I have not been able to figure out how to implement it while still using the webflow interface for lottie animation.
@IVG it works for me. I did remove the width and height settings and set mine inside a div with 100vw + vh to absolute positioning and 100% width and height.
Not sure if that’s the nicest way to do it, but it works.
@sabanna, the problem with this is that @IVG is using a lottie animation in a ~page done loading~ animation . Sometimes it seems like the script provided runs before the svg element gets to the DOM. Also, using timeout causes a small jump during the animation, due to the fact that the animation starts with a fixed width and then it becomes full screen.
Yep, agree, there definitely might be more elegant solutions, maybe with EvenListener. It was just something that I put together really quick while lunch
And I am so appreciative of both of your efforts! I am trying to see if perhaps there is a better way to structure the animation that it won’t depend on timing as much… perhaps I will have all the elements with 0% opacity except for the animation - so they load but not show, and then they will appear after the animation runs…
You did great, don’t even talk about it. I was looking into forms of styling “future elements” in the DOM and came across livequery, but unfortunately that stopped working after a certain version of jQuery.
So I had my brother-in-law help me with the issue and he came up with a script that solves this problem with the timeout delay - and consequently the blink between loading of the script and creation of the SVG element.
His script goes in the header so it runs first , while the link timeout functions goes in the body…
So, I have two lottie transitions which I gave ID’s of lottie and lottie1
check this out!
HEAD Code
for(var wrapperName of ['lottie', 'lottie1']) {
setAspectRatio(wrapperName);
}
function setAspectRatio(wrapperName) {
var wrapper = document.getElementById(wrapperName)
if(wrapper) {
var anim = wrapper.getElementsByTagName('svg');
if (anim && anim.length > 0) {
anim[0].setAttribute("preserveAspectRatio", "none");
anim[0].style.width = "100vw";
anim[0].style.height = "100vh";
return;
}
}
setTimeout(setAspectRatio, 0, wrapperName);
}
and the the FOOTER code
$(function(){
$("a").click(function(evt){
evt.preventDefault();
var link = $(this).attr("href");
setTimeout(function() {
window.location.href = link;
}, 1500);
});
});
Albeit it might also need some additional work because if I understand it, the loop keep continuously running… need to test it some more…
Great job Ilya! From what I understand, he created a recursive function that calls itself every time it doesn’t find both SVGS. The moment everything goes right inside the “if” wrapper…
…the function uses the return statement and stops calling itself. That being said, I think you’re good
Hi Ilya! Not sure if you saw this in the webflowers slack channel, but I’m wondering if you could try adding a custom attribute on the lottie animation itself:
name: data-preserve-aspect-ratio
value: none
So when the lottie animation is loaded for the first time, it’ll take this value into account. Otherwise, the default value for preserveAspectRatio is xMidYMid meet.
This does work! Awesome man - thank you - this is a great idea - I am so bummed that I have not thought of this myself - i tried it but was putting in the value of preserveAspectRatio instead, and that did not work! and the solution with your approach is much cleaner that all that custom code!
No worries! We just shipped a change so that this preserveAspectRatio value is passed into lottie’s loadAnimation({}) configuration, which is why we’re able to “fix” the issue. It’s sort of a hidden feature (mainly to limit complexity), but I’m thinking if we run into this particular case more and more from different users, we may end up adding it to the settings UI.
mostly great job Leon (my brother in law)!