Animation works locally but not in production (no minification)

Tell us about your environment

• Machine Mac OS Monterey 12.2.1 Intel Core i9

• Browser and Browser Version: Chrome 99.0.4844.51 (Official Build) (x86_64)

• After Effects Version: Latest

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

• We have a Next.js app using Next version 12.1.0
• We have downloaded https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.9.1/lottie.min.js and serve it out of the public folder using <Script src="/scripts/lottie.min.js" strategy="afterInteractive" />. The library file is being loaded correctly and with no modifications. console.log(lottie) returns the lottie object correctly.
• We are calling the lottie library in the product thusly:

import intro from './lottie/reportGenIntro';
lottie.loadAnimation({
  container: document.getElementById('lottie_intro'),
  renderer: 'svg',
  loop: false,
  autoplay: true,
  animationData: intro,
});

We have tried adding the lottie json to the public directory and importing it from there. We also tried converting to TypeScript and importing directly. Same outcome either way.

Animation data as exported from AE: https://gist.github.com/adamrneary/f00d06f58711fb9b1cb5f65bfa9d29e9 Animation data as converted to TypeScript: https://gist.github.com/adamrneary/f430ad9556142f8a90d47fdb7d380511

console.log(intro) returns the same object locally and in production.

What did you expect to happen?

We want the animation to work locally and in production

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

The animation works perfectly in local development. The same code in production renders an <svg /> containing an empty <g/> No errors log to the console

<div id="lottie_intro">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 200 200"
    width="200"
    height="200"
    preserveAspectRatio="xMidYMid meet"
    style="
      width: 100%;
      height: 100%;
      transform: translate3d(0px, 0px, 0px);
      content-visibility: visible;
    "
  >
    <defs>
      <clipPath id="__lottie_element_2">
        <rect width="200" height="200" x="0" y="0"></rect>
      </clipPath>
    </defs>
    <g clip-path="url(#__lottie_element_2)"></g>
  </svg>
</div>

Very strange that it seems to be the same code in both environments running the same animation data input. Not sure where to start!

Very happy to collaborate on a fix, document learnings, etc. Any help would be great!

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

File available here

[adamrneary]

Awesome. Thanks again for helping us diagnose this, and for explaining the nuances. We can take it from here!

[bodymovin]

it depends on the animator. Some make use of them extensively and others don’t use them at all. In this case, it seems there is only one expression used and it should be very simple to replace it with some extra keyframes.