Full Screen Lottie Transition

Design help Custom code
21

@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

22

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

1 Like
23

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

24

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.

25

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
26

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:

27

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
28

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!

29

Hey @madewithjenny

Have you tried this solution?

30

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.