Streaming live at 10am (PST)

Full Screen Lottie Transition

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.

5 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.

2 Likes

@tai

Hi Again, I was wandering if you could have a look at the test page I made:

there are two portions - one is pages (home/about/contact) and second (home-2/about-2/contact-2)
the first one has a white page transition lottie animation and it works seamlessly - you can’t see any jumping of the page…

the second part has a different transition with staggered circles… I have used the same settings and everything (the only difference I placed elements into symbols) but there is a flicker when pages change - and I can’t figure out why is it not working as seamlessly as the first one

@tai - If its not too much trouble please have a look - if you can help me solve this!

Here is the READ ONLY LINK
Here is the PUBLISHED LINK

Please add this to the UI! That would be awesome!

BTW - it is pretty straight forward as is - I put together a tutorial and a demo page to demonstrate - have a look - and it works very well

It is super easy yes, I’ve just put it wayyyyy too much into a test project I am doing. It’s like Lottie city up there.

I think though it would be even easier if it was in the UI. I’m imagining it like the background image style panel, so you can set cover or whatever style you want. Make it a little more user friendly.

Well if they are going to implement it, all the options for various modes should be included… If I understand they have same options that are equivalent to objectfit: - cover, contain etc…

That being said it would be great if the objectfit would also be added :slight_smile:

2 Likes