Lottie-web: Problem with Chrome while rendering the animation from .json data

[sowmyy]

I work with a normal environment setup at office.

• Chrome Version 60.0.3112.78 (Official Build) (64-bit)
• After Effects CC 2016

The animation dint work locally with respect to chrome, but the same worked locally with Firefox. Then i hosted the file into a local server and that solved the problem of bodymovin support with chrome. But, there is a strange white layer that tends to overlay on top of the animation, when it is playing which doesn't happen in Firefox.

I expected the animation to work exactly the same in HTML-5 canvas compared to the output from After effects

Any bodymovin demo from codepen faces the same issue of white layer overlay when the animation is playing.

[bodymovin]

Can you share a link with your issue?
Regarding locally playing animations without a web server, that is a browser limitation. You should always use web servers for loading json files.

[sowmyy]

@bodymovin
I've run the html file using atom's live server package which will host it in a local server. So, I am playing the animations using web server only. I have attached a video. Please see to it, because this is a major bug related with bodymovin. Thanks in advance :)
screencast_chrome_bug.zip

[bodymovin]

Yes, this is a major bug but it's not related to bodymovin, it's related to chrome in their latests versions.
https://bugs.chromium.org/p/chromium/issues/detail?id=750252#c4
From my research it happens with masks and on old graphic cards.
Can you share a codepen with the issue?

[sowmyy]

Yeah, the bug is related to chrome. So what could be done to solve it? I am not allowed to post data or code online as per my company's policies. If you could come up with an alternative that solves the problem, please do share me. Thanks in advance. :)

[sowmyy]

Been a long time, but is this bug handled by chrome ?
I guess this issue related with chrome might be a major barrier for Bodymovin.
Number of chrome users in the world is numerous. So I guess this needs to be sorted out. what say @bodymovin ?

[bodymovin]

This has already been fixed by chrome and it's working fine now.

[jbotte]

which version of chrome is it fixed in, im running electron 1.7.10 and still having some artifact issues 5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Electron/1.7.10 Safari/537.36"

[bodymovin]

I think it's chrome 62.
Can you post a screenshot of the artifact and the json file?

[jbotte]

ah the latest i can run currently is a version of 59 of chrome (thats what electron 1.8.6 supports) i was able to find a legacy js file laying around in an old animation a designer sent me, that version of body moving seems to fix my problem so maybe what i was experiencing isn't the same? I am not able to share the assets unfortunately. this is basically what was happening https://www.dropbox.com/s/0d7juplhvedw5bt/odd.mov?dl=0

[jbotte]

this is the bodymovin that seemed to work for me ... https://gist.github.com/jbotte/3e9da6f8d1f11bbb3499e200aedca19d

[bodymovin]

@jbotte hmm not sure what can be going on but it doesn't look like a chrome issue. Probably something related to the player.
If you can share a reduced version of the issue, it would be great.
Do you know if you're using Rubberhose for the animation?

[MB00design]

Hi . Please help me . I create animation with rubber hose rig and export with bodymovin but doesn't work.

(first I rig with pins and convert to rubber hose rig)

[bodymovin]

@MB00design puppet effect is not supported by the player unfortunately.

[alekspickle]

just received this on 73 version of chrome. Works in mozilla like a charm.
Any updates?

[bodymovin]

@alexgnatrow you're getting that error because you're trying to load the json file from your file system instead of a web server.
Because of security reasons, browsers like chrome won't let you load them this way.

[MiDoUx9]

@alexgnatrow you're getting that error because you're trying to load the json file from your file system instead of a web server.
Because of security reasons, browsers like chrome won't let you load them this way.

how can we do it then without having to upload the file

[bodymovin]

@MiDoUx9 you can run a webserver locally with node or xamp.

[MiDoUx9]

Thanks for the reply !
I actually fixed it by linking the .json file from the cloud
Also using a live server works im just too lazy

On Sat, 11 Apr 2020, 3:14 pm hernan, [e-mail] wrote:

@MiDoUx9 https://github.com/MiDoUx9 you can run a webserver locally
with node or xamp.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/airbnb/lottie-web/issues/632#issuecomment-612430789,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/ALVSDNOKUGYAL2XMGI7RMCLRMB3N3ANCNFSM4D3W575A
.