Lottie is not displaying on prod site, but is working perfectly in local dev environment

[jbellmont-phntm]

Tell us about your environment

• Mac OS Big Sur, v11.2. Macbook Pro (13inc, 2020)
• Running an Angular app, using the following libraries:
  "lottie-web": "^5.7.3",
  "ngx-lottie": "^6.3.0",

• Browser and Browser Version:
  Tested on:

• Chrome Version 94.0.4606.61 (Official Build) (x86_64)
• Safari Version 14.0.3 (16610.4.3.1.4)

• After Effects Version:
  2021

What did you do? Please explain the steps you took before you encountered the problem.

• We currently have about 4 working Lottie animations (which were built about 6-12 months ago) that run and work perfectly fine on our homepage.
• We are producing a middle eastern locale version of the site, and need to 'mirror'/reverse the lotties so they can fit in a right-to-left layout page (html dir="rtl", etc.). My designer reversed the animation and exported 2 new json files from AE.

What did you expect to happen?

• The lottie animations to appear and run as they did on my local environment.

What actually happened? Please include as much relevant detail as possible.

• Initially there were some glitches in the animations (e.g. a hand would detach from a person), but I managed to fix that by importing the lottie_svg library, instead of using the min version. that work perfectly fine in my local dev environment.
• But when I build and deploy to live, the animations just don't appear on the page.
• There are 0 console errors.
• Strangely, I've tested the built production version locally, and they work fine there.
• I've also tried updating both lottie-web and ngx-lottie to the latest versions, with no luck.
• We even tried exporting a very slightly tweaked non-reversed Lottie, as we thought it could be due to the reversing process that was causing the error, and not even this renders properly. I was wondering if it's something to do with the export?

Please provide a download link to the After Effects file that demonstrates the problem.

• Due to client confidentiality, I cannot share this.

Are there any reasons why this might be happening? I am convinced it's due to the exporting of the JSON file, as I've done as much as I can on the dev side to fix the potential issue.

[bodymovin]

hi, have you tried using the lottie player from the cdn? At least to verifiy it's not a minification / obfuscation issue

[therealsylaucoin]

Having the same issue. Have you made any progress with this issue @jbellmont-phntm ?
Such a strange behaviour, as everything works perfectly in lowers.

[bodymovin]

@therealsylaucoin do you have a link to check?
From what I've seen so far, some bundlers either remove unused functions that are actually needed on expressions, or minifiers rename those methods.

[jbellmont-phntm]

Having the same issue. Have you made any progress with this issue @jbellmont-phntm ? Such a strange behaviour, as everything works perfectly in lowers.

Apologies for the late reply! I never found a solution.

And now another colleague is having the same issue - it working on local, but after build and deploy, it's not appearing.

Would be great if anyone else has figured out a solution.

[Dylan-Wells-at-LION]

This is happening for me. The animation works completely fine locally, it does not work on the dev site. If you inspect the elements it seems to be animating but all the assets aren't sized properly and are invisible. The animation includes images and I thought including the images in the json would fix it but it doesn't. There are zero error messages indicating a problem.

[bodymovin]

@Dylan-Wells-at-LION can you share a link to check the issue?

[Dylan-Wells-at-LION]

@bodymovin It's for a client and behind a password so I can't post a link/login info to the dev site here. I tested the data.json on lottiefiles.com and although it looked a little incorrect it was visible. Sorry if that's not very helpful but is there any other info I can get to you?

[bodymovin]

@Dylan-Wells-at-LION this is usually related to CSP or bundlers, but without an example it's hard to tell.
Any chance you can build a simple example and provide a link?

[Dylan-Wells-at-LION]

@bodymovin I created a stripped down version for you to look at, it has the same issues as the real one. Here is what it should look like

Screen.Recording.2022-05-11.at.1.55.56.PM.mp4

Here is the link:

[removed]

[Dylan-Wells-at-LION]

@bodymovin

Local:

Online:

[Dylan-Wells-at-LION]

@bodymovin I created another version with just shapes instead of images on the same site and it works fine so I'm guessing it has something to do with how images are handled.

[Dylan-Wells-at-LION]

@bodymovin The image are rendered and sized correctly when I use the canvas or svg renderer, the issue happens when a use the html renderer. The animation is broken for other reasons but it isn't completely blank.

[bodymovin]

@Dylan-Wells-at-LION can you try calling .resize() on the animation instance once the window has loaded? And if it doesn't work, try to load the animation after everything is loaded?
I know it's not a solution, but it can help identify the problem

[bodymovin]

@Dylan-Wells-at-LION I think I found the issue. There is a global css selector applied to all image elements at the end of this file:
https://lottietesting.wpengine.com/wp-includes/css/dist/block-library/style.min.css?ver=5.9.2
html :where(img) {
height: auto;
max-width: 100%;
}
that is affecting all img elements of the page, so the images don't behave as they should.
I suggest that you remove it or change it for a more specific one so it doesn't affect the lottie imgs

[Dylan-Wells-at-LION]

@bodymovin Wow... Thanks for finding the issue even if it had nothing to do with Lottie.

[smitpatelx]

Im having the same issue.

• Lottie-Web works well in canvas mode in both prod and dev
• But when I use html or svg mode, it doesn't work in prod, but it works in dev
• I'm using

{
  "react": "18.2.0",
  "next": "13.0.3",
  "lottie-web": "^5.9.6",
}

[TamirHen]

Was having the same issue with next.js.
I found a work around in this post:
vercel/next.js#42801

Change swcMinify to false in next.config.js:

// next.config.js

module.exports = {
  swcMinify: false,
}

[MeisterJustice]

This worked for Nextjs!! thanks

[Cainuriel]

I have the same problem with a javascript server using vite Svelte.

"devDependencies": { "@sveltejs/vite-plugin-svelte": "^1.1.0", "svelte": "^3.52.0", "tailwindcss": "^3.3.2", "vite": "^3.2.3" }

Working towards a solution.

[Cainuriel]

If you are using Vite and Svelte and it does not render in production it may be that you are not using the Svelte library for this files.
"@lottiefiles/svelte-lottie-player": "^0.3.0"

The solution to this problem is to use it in the correct way.
I share the existing solution in another issue.
If you follow the step by step implementation of your lottie component as described below it will render in production without problems:

working solution

[smitpatelx]

Currently, I am using swcMinify: true, in my next config.

• Then in my component, I use it like this:

import Lottie from 'lottie-web';
import AnimationJson1 from '@/libs/lottie/animation-1.json';

const Component = () => {
  React.useEffect(() => {
    const lottieInstance = Lottie.loadAnimation({
      container: document.getElementById('lottie-card-section-1') as HTMLElement,
      autoplay: true,
      loop: true,
      renderer: 'svg',
      animationData: AnimationJson1,
      rendererSettings: {
        className: svgStyles.svgSizeFix,
      },
    });
    lottieInstance.setSpeed(0.5);
    return () => {
      lottieInstance.destroy();
    };
  }, []);

return (
<div className='flex flex-wrap items-center justify-center mt-0 relative z-10'>
  <div
    className='w-4/5 md:w-[30rem] lg:w-[45vw] h-[25rem] z-10 pointer-events-none select-none relative
      ml-10'
    id='lottie-card-section-1'
  />
</div>
);
}

Hope that helps anybody who still want to use swcMinify option in nextjs and in general.
yarn add -S lottie-web

• I also have another react-vite project, and there I'm using "@lottiefiles/react-lottie-player": "^3.5.3",
• Here is a small snippet from that project.

// Supports tailwind Dark mode `class`
import { Player } from '@lottiefiles/react-lottie-player';

const Component = () => (
<div className="relative">
  <Player
    src="/animation-1.json"
    background="transparent"
    speed={1}
    controls={false}
    loop
    autoplay
    className="h-52 md:h-60 lg:h-80 2xl:h-96 filter brightness-100 dark:brightness-90
      transition-all duration-300 ease-out"
  />
</div>
);

Cheers! if I helped you in any way 🍻

[Underwater008]

I am using vite and three.js, after putting the Lottie json file into the public/images folder it solved the problem.