Lottie-web: CanvasRenderer is undefined in bodymovin light player

Created on 31 May 2017  路  11Comments  路  Source: airbnb/lottie-web

I'm getting the following error in the console when using the bodymovin light player. Any guesses as to why I might be seeing this error? I'm guessing it might be me ... but this error seems to be pointing to the player code.

SCRIPT5009: 'CanvasRenderer' is undefined
bodymovin_light.min.js (6,29083)

Most helpful comment

try adding the renderer type on the div element.
data-bm-renderer='svg'
it will default to canvas if you don't.
I should change that for the light version, though.

All 11 comments

the light version only supports the svg renderer

Hi Hernan,

Thanks for your quick reply. I see this message in spite of specifying "SVG" as the renderer to use for the animation.

Thanks,
Jeremy

can you share a link with the error?

Here's the link (just have the Console open when you load the page):
http://jeremyknudsen.azurewebsites.net/mwf/

try adding the renderer type on the div element.
data-bm-renderer='svg'
it will default to canvas if you don't.
I should change that for the light version, though.

Yeah, I was thinking since this is the _light_ player it should only support the SVG renderer and not even have a case statement here. Removing it would make the "light" player even lighter :)

Still getting this error with renderer: 'svg' in the js and data-bm-renderer="svg" added to the container.

@AlexandraKlein hi, can you share a link?

@bodymovin error went away after I reexported from After Effects. Thanks!

@bodymovin

I should change that for the light version, though.

Any chance this will be changed? Still getting the console error with the light version and renderer set to SVG. Adding an additional data attribute as @AlexandraKlein suggested seems to help.

My hacky solution:

window.CanvasRenderer = class {
    setProjectInterface() {}
}
/* Inject Player Below */
Was this page helpful?
0 / 5 - 0 ratings

Related issues

DannyK123456 picture DannyK123456  路  3Comments

Sandok-voc picture Sandok-voc  路  4Comments

ritsraghani picture ritsraghani  路  3Comments

jumostudio picture jumostudio  路  3Comments

leantide picture leantide  路  3Comments