Lottie animation blurry in chrome but looks perfect in safari and mozilla

Lottie in Web
1

I’m having a weird issue with my lottie animations embedded on a website. Basically, the images look good on Safari and Mozilla, but a bit blurry on Chrome. The website is:

Is this a known issue? Thanks!

2

Hi there,

Can you provide more context on the problem? I opened the website on Chrome and the animations look good and clear to me.

3

I see it on OP’s website and I have the same problem. This must be an issue. The animations are ok in all browsers except Chrome. Even in Edge.

4

Hey @kvergeldedios1 the photos of the people are brought in through Illustrator? So, you’ll want to maintain the raster, try turning this option on in the switches/modes area. It’ll maintain a sharp raster throughout the scaling and resizing of the animations.

Screen Shot 2021-11-12 at 10.48.10 AM

1 Like
5

I agree in Chrome the vector objects are soft in comparison to Firefox and Safari. On the other hand, the animations in Chrome are smoother and not so jumpy.
I tried the keep as vector check box in After Effects but does not really make a difference.
Even the startpage page of Lottiefiles website you can see here the softness in Chrome. (screenshot on the left).

Screenshot 2022-02-07 at 13.37.30
Screenshot 2022-02-07 at 13.37.301004×471 144 KB

1 Like
6

I have been consistently struggling with the same issues brought up in this thread for a while. Within the last few months, I’ve noticed that a lot of my animations are rendering as blurry, specifically when implemented either in iOS Native app or in chrome (when testing on other browsers they look great). I have hypothesized that this issue occurs when the animation has many nested precomps, as the layers that are precomped will look blurry while other layers/objects won’t. Activating the continuously rasterize setting on the precomp layer doesn’t help, and in a lot of these instances it would be virtually impossible to take the layers out of the nested precomp.

I have found other discussions online about similar issues people have encountered (like this one: Chrome shows Lottie animation blurry - Stack Overflow), but the solutions offered in these threads haven’t solved the issue for me and my dev partners. If anyone has found any solutions outside of what’s already been discussed in this thread it would be greatly appreciated!

1 Like
7

Can you send a sample file of your project (aep + json) format?
I have same problem but I can fixed this by this code

You must insert this code before </body> and after all of lottieplayers.

document.addEventListener("DOMContentLoaded", function(){

  let elements = document.getElementsByTagName('lottie-player');

  for (var i = 0; i < elements.length; i++) {
  
    elements[i].addEventListener('play', (event) => {
      // console.log(event.target.shadowRoot.querySelector('svg').style.transform);
      event.target.shadowRoot.querySelector('svg').style.transform = '';
    });
    elements[i].play(); // trigger (again)

  }
});