Streaming live at 10am (PST)

Full Screen Lottie Transition

Hi there fellow webflowers!

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.

ANY suggestions will be greatly appreciated!

My project READ ONLY link.

PS. there is another Webflower who is facing the same conundrum as I.

1 Like

yep! This is the exact same thing I am having issues with. No solution yet =[

Hey, guys!

Try to use this snippet:

<script>
​
setTimeout(function(){
    let animWrap = document.getElementById('lottie');
    let anim = animWrap.getElementsByTagName('svg');
    anim[0].setAttribute("preserveAspectRatio", "none");
    anim[0].style.width = "100vw";
    anim[0].style.height = "100vh";
​
}, 500);
​
</script>

Of course, don’t forget to change lottie to your element’s ID

Hope it will help

2 Likes

The jQuery solution:

<script>

$(window).bind("load", function() {
    let animWrap = document.getElementById('lottie');
    let anim = animWrap.getElementsByTagName('svg');
    anim[0].setAttribute("preserveAspectRatio", "none");
    anim[0].style.width = "100vw";
    anim[0].style.height = "100vh";
});

</script>
3 Likes

OHHH SNAPPPPPP!
I think this works! I’ll need to double check on my widescreen.

Sabanna… You’re a genius!

https://steven-titchener.webflow.io/

Hey, @TwoGuysCreative!

you have to run this script at the “footer” area, before the closing body tag (</body>)

1 Like

@TwoGuysCreative - please Let me know if it works for you - because for me it doesn’t :frowning:

Here is an example that works with jQuery
https://long-class-names.webflow.io/

this one works with timeout, but it’s not perfect, you have to adjust the time
https://steven-titchener-7e32d8dcf102fc32e61bbb.webflow.io/

@sabanna… Ahh thanks, I will do that.

@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 :sweat_smile:

1 Like

@sabanna @Jeandcc

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…

image

…the function uses the return statement and stops calling itself. That being said, I think you’re good

1 Like

Well, not great job me :slight_smile: mostly great job Leon (my brother in law)!

BTW he also added a timeout for the function just in case it doesn’t find the SVG element on the page so it does not continue running indefinitely…

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.

7 Likes

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!

Again thank you so much and this is Awesome!

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.

3 Likes