Full Screen Lottie Transition

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

11 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

@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!

1 Like

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

Hi sabanna, thanks so much for this code! I was looking for this for days!

The code works for now to show the website to the client, but it only works when I set my lottie animation on svg render. The problem is, on svg render the animation starts flickering when scrolling (it’s an animation on scroll).

Does this code also work for canvas render?

Any help would be much appreciated! Thank you :slight_smile:

I’ve found a solution that is a bit more bulletproof than the setTimeout and window.load solutions. Both have their flaws, but this one uses the MutationObserver to dynamically update the SVG the moment it is added to the DOM. The solution is by no means perfect, and can definitely be improved upon I’m sure, but here it is regardless:

const targetNodes = document.querySelectorAll('.lottie-video-canvas');
const config = {
  attributes: true,
  childList: true,
  subtree: false
};
const callback = function (mutationsList, observer) {
  for (let mutation of mutationsList) {
    if (mutation.type === 'childList') {
      mutation.target.querySelector("svg").setAttribute("preserveAspectRatio", "none");
      observer.disconnect();
    }
  }
};

if (targetNodes) {
  for (var x = 0; x < targetNodes.length; x++) {
    const observer = new MutationObserver(callback);
    observer.observe(targetNodes[x], config);
  }
}

I have three of these Lottie animations on my page, hence the for loop. Let me know what you think.

1 Like

Hi @badg0003!

Thanks for the code!
Can you give me advice in what I need to change in the code to fit my website?
I guess I have to change the .lottie-video-canvas into my class where the json file is embedded?

And is this a code that would get rid of the flickering? Sorry, I have no clue about jquery codes :smile:

Basically my problem is if i change it to svg rendering it is flickering but full screen, if i change it to canvas render (which would be the better solution for my animation) then the animation isn’t full screen.

Here is my read-only link: https://preview.webflow.com/preview/cut-meridian?utm_medium=preview_link&utm_source=designer&utm_content=cut-meridian&preview=ade4f977957099d339131c88506a5e87&mode=preview

Thanks so much for your help!

Hey @madewithjenny

Have you tried this solution?

Apologies for the late reply, but if you’re able to share a published version of the site I can debug it a bit easier. And hopefully sooner than in 16 days haha.