dotLottie Player Component Disappears on Window Resize in Nuxt3

[patratel]

I'm facing an issue in a Nuxt3 project where a dotLottie player component disappears whenever I resize the browser window. This issue occurs in a setup where I'm using GSAP for animating elements, including the dotLottie-player container.

The dotLottie-player works fine initially, but as soon as I resize the window, it disappears and doesn't reappear unless I reload the page. Upon inspection of the dotLottie-player the previously rendered element has disappeared after resizing the window.

I'm using GSAP with the ScrollTrigger plugin to pin the container of this dotLottie-player element to the top of the page. Using lottie-interactivity library the lottie gets animated on the user's scroll.

I know this issue is somehow related to GSAP , because if i remove it the resize bug disappears.

Has anyone encountered a similar issue or can provide insight into why the dotLottie player disappears on window resize when using GSAP? Any suggestions on how to troubleshoot or fix this problem would be greatly appreciated.

[afsalz]

Hi @patratel, could you reproduce the issue you're encountering in a CodeSandbox and share the link with us? It would really help us get a better understanding of the problem. Thanks!

[stefankempf]

I'm encountering the same issue, the player is empty on window resize.

important: the issue is only happening, when gsap scrolltrigger pin option is activated and the lottie animatino is getting wrapped into another div.pin-spacer

I have tried to recreate the issue in a code sandbox. I couldn't get it to work, codesandbox is crashing when importing the player-component. nevertheless, here is the link.