The Lottie animations appear clear in After Effects and the Lottie player, but they become blurry when embedded on the website

Lottie in Web
1

I’m experiencing an unusual issue with my Lottie animations embedded on a website. I exported graphics from Figma to After Effects using the AEUX plugin. While the animation appears clear and smooth in After Effects and the Lottie player, it becomes blurry when embedded on the website. Additionally, I’ve noticed that some frames are clear while others are blurred when playing in the timeline. I attempted to double the composition size in After Effects and then export it to Lottie, but the problem persists.

2

Hello, @Shane1

Yep, looks strange. If you don’t use images which could be compressed too much this is a kind of Lottie bug. Did you try to render and upload the animation without shaking?

3

This is an issue i’ve ran into as well. There’s a solution!

This happens in chrome because of a how it handles a CSS property of transform. The best and simplest way to fix this issue is to put this code into your JS file:

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)

  }
});

from here:

1 Like