lottie-web
lottie-web copied to clipboard
airbnb
Animation fails with canvas renderer but works with svg in lottie-web
Environment
- OS: MacOS
- Library: lottie-web
Browser Versions
- Chrome 126.0.6478.127 (arm64)
- Firefox 128
- Safari 17.3.1
After Effects Version
- Will update here, once I have it.
Description
I have a lottie JSON file animation created with AE + BodyMovin.
I am using lottie-web, see the "demo" folder in the attached zip file.
The animation works fine with the svg renderer.
However, it doesn't work with the canvas renderer, resulting in a blank canvas created on the page without any console errors or other useful information.
Possible Solution
Using the plain "demo" version of the animation in the zip file and turning on Pause on uncaught exceptions & Pause on caught exceptions:
revealed the following errors thrown but not reported anywhere in console:
TypeError: Cannot read properties of null (reading 'length')
This error is thrown within the getCharData: function (e, r, i) {... function. See here:
I don't have enough knowledge about lottie to conclude what the issue here is. Although, changing the function to just return emptyChar eliminate these errors and make the animation render fine with canvas renderer, but all texts layers are omitted.
How to reproduce:
Please just use the attached zip, demo folder, html file, change the line renderer: 'svg', to renderer: 'canvas',.
Expected Behavior
The animation should work with the canvas renderer the same way it works for svg. Text are not special layers, should be supported well by both renderers. If it fails to render with one of the renderers, it should not fail silently but with some error logging or other error-catching mechanisms for developers to investigate further. Eg: I feel that the JSON here has some fonts issue with canvas, but again, it is only assumption and having some error data from lottie would be much helpful to conclude.
Actual Behavior
A blank empty canvas element is created in HTML, and the animation doesn't work.
