search

LottieFiles / dotlottie-web

Official LottieFiles player for rendering Lottie and dotLottie animations in the web. Supports React, Vue, Svelte, SolidJS and Web Components.
https://developers.lottiefiles.com/docs/dotlottie-player/
MIT License
99 stars 6 forks source link

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

Open sulram opened 2 weeks ago

sulram commented 2 weeks ago

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 commented 2 weeks ago

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 }} ... />