Failed to construct 'ImageData': The source width is zero or not a number.

[sulram]

Overview

Error that's occuring wrapper with display:none and framer motion of a <DotLottieReact /> component

Failed to construct 'ImageData': The source width is zero or not a number.

Sometimes

Consuming repo

What repo were you working in when this issue occurred?

@lottiefiles/dotlottie-react

[theashraf]

Hi @sulram, when using display: none, the width and height of the DotLottieReact canvas are set to zero, causing the error.

You can use the hidden prop directly on the DotLottieReact component. This keeps the component in the DOM without rendering it visibly:

<DotLottieReact hidden ... />

also you can use other CSS properties like visibility or opacity:

<DotLottieReact style={{ visibility: 'hidden' }} ... />

<DotLottieReact style={{ opacity: 0 }} ... />

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs.

[Idowu-Adelekee]

I experience this issue with Web using vanilla JS, but the parent element also need to be set to display none because I'm working on a mobile nav which at the desktop screen should be hidden. Is there any other workaround to it?

[steven-tey]

Still getting this issue with the following code:

import { Wordmark } from "@dub/ui";
import { DotLottieReact } from "@lottiefiles/dotlottie-react";

export default function AnimatedWordmark() {
  return (
    <div className="group relative h-6">
      <Wordmark className="absolute h-6 group-hover:opacity-0" />
      <DotLottieReact
        src="https://lottie.host/f53c93bf-8ae7-4f55-a73e-fbdf36e5c062/4KoxyK0Ruc.json"
        playOnHover
        loop
        className="absolute h-6 opacity-0 group-hover:opacity-100"
      />
    </div>
  );
}

[theashraf]

Thanks @steven-tey for the code, I'll investigate it further