lottie-web: Cannot set property 'innerHTML' of undefined

There is an exception occured when call the destroy method.

My code is below, some modification of the grunt demo

<canvas style="width: 100%; height: 100%;"></canvas>

const anim = bodymovin.loadAnimation({
  ..., // dont pass wrapper param
  rendererSettings: {
    context: document.querySelector('canvas').getContext('2d'),
  }
})
setTimeout(() => {
  anim.destroy()
}, 1000)

About this issue

Original URL
State: open
Created 5 years ago
Reactions: 2
Comments: 17 (1 by maintainers)

Commits related to this issue

Update CanvasRenderer.js temporary fix https://github.com/airbnb/lottie-web/issues/1772 — committed to ceanyd/lottie-web by ceanyd 5 years ago

Most upvoted comments

@bodymovin Managed to use the work around mentioned in the lottie-miniprogram issue where this issue was referenced. Which was to check for the wrapper and default it to empty object. this.animationItem.wrapper=this.animationItem.wrapper || {} Since the error occurs when innerHTML is be accessed off the wrapper(undefined)

We tried using both the canvas and svg renderer. What happens in our scenario is that React will unmount the wrapper element. React’s clean up callback happens async and by the time animation.Item.destroy() is clearing the innerHTML, wrapper is already gone.

Duongasaur on Jan 23, 2020