search

airbnb / lottie-web

Render After Effects animations natively on Web, Android and iOS, and React Native. http://airbnb.io/lottie/
MIT License
30.56k stars 2.87k forks source link

Animation fails with canvas renderer but works with svg in lottie-web #3104

Open baryosef-loops opened 3 months ago

baryosef-loops commented 3 months ago

Environment

Browser Versions

After Effects Version

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: image

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: image

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.

After Effects File

animation zip

kfitfk commented 2 months ago

Try exporting the JSON file with glyphs, the canvas renderer needs to convert text to shapes.

image