Bezier paths with absolute in/out tangents render incorrectly

[rsereir]

Hello !

We are lot people with render issue on a lot of LottieFiles in react native. This issue is the continuation of another issue opened here https://github.com/lottie-react-native/lottie-react-native/issues/1194

This is the current render:

This is the animation:

https://app.lottiefiles.com/animation/822c47f1-f147-4114-97ba-dd9e4f2ef8d0?channel=web&source=public-animation&panel=download

[calda]

Can you upload the animation file directly to this issue? I don't have permission to view the link you shared:

[rsereir]

Hello @calda, Thanks for you quick answer !

Sorry i give you a private url, this is the public url with all features used, etc:

https://lottiefiles.com/animations/astronaut-light-theme-keS0ihnMAU?from=search

[calda]

The animation you linked renders as expected when I test it in our sample app:

Please share a sample Xcode project that demonstrates the animation rendering incorrectly.

[matinzd]

It seems like the animation that you are sharing is different than the one that is actually in your app 😅

This is the one you are using:

https://app.lottiefiles.com/share/5052c0b3-ed25-46c1-9db4-b7911c352073

[rsereir]

@matinzd hello ! No, it's my first link used here, but i just custom colors in my lottie files editor.. Otherwise, in itself it doesn't change anything I think the link you provided seems to be someone who did like me, starting from the same lottie and only changing the colors

[matinzd]

This is your json file that I imported from the project into lottiefiles editor. You need to share the one that you modified not the original one. The original one is working as expected but the modified version is having some rendering issues on iOS and Android, not on web ...

[rsereir]

@matinzd It may be simpler to work with the original lottiefile, I can provide you with the same rendering problem screens with the original one if it allows us to move forward

[matinzd]

Can you share the code that you are using here as well? Just the <LottieView /> component with its props would be enough. @rsereir

[rsereir]

        <LottieView
          source={require('assets/lottiefiles/spinner.json')}
          style={{ width: '35%', aspectRatio: 1 }}
          autoPlay
          loop
        />

        This is the usage @matinzd 

[matinzd]

Can you try with renderMode={'SOFTWARE'} or renderMode={'HARDWARE'} ?

[matinzd]

I am not sure which one you are using! :D I created a pull request on your repo and you can also check it out in your login screen. It seems you are using a wrong animation.

[rsereir]

Can you try with renderMode={'SOFTWARE'} or renderMode={'HARDWARE'} ?

With both suggestions it's not working correctly.. I use the good lottie file ( from download link in the offical lottie marketplace ), i tried on my login screen and inside my dashboard app and render is breaked on both

[matinzd]

This is your app's screenshot and I even made a pull request on your fork repo. I cannot reproduce the issue you are having. Try checking out to the branch and see your login screen there.

https://github.com/rsereir/fork-lottie-error/pull/1

[calda]

I can reproduce the rendering issue with the animation that was modified in the LottieFiles editor:

issue_2345.json

[matinzd]

Yes I could also reproduce the rendering issue with the modified file but not with the original file.

[rsereir]

@matinzd / @calda It's mandatory to add LottieFile in workspace to download, if i didn't edit anything but i add this on my workspace it's already corrupted or non ? someone can share the working json here ?

Thanks a lot for your investigations !

[matinzd]

The working animation is in the PR I shared in your repo. Please check out there and try running the app.

[rsereir]

@matinzd Wow, i just try with the json given in PR of my fork and it's working correctly, juste to be understand how you download the public lottie: you add lottiefile to your workspace and download from workspace ? or you use other method to download it

This issue is also on files edited by author directly on lottiefiles.com and posted publicly in marketplace ?

[rsereir]

Thank you for your investigation, it still shows that it works correctly if you download without going through the editor, that's good news

[pariah140]

Thank you for your investigation, it still shows that it works correctly if you download without going through the editor, that's good news

@rsereir - what do you mean by download without going through the editor? I can't see another way to download it.

[rsereir]

@pariah140 you have to "share" the lottie, and a public json url is generated by lottiefiles website. You have to go on the json file in your browser and copy content ( or download file directly from this page )

Don't use the standard " Download " button or add to workspace button

[pariah140]

amazing thanks so much @rsereir for such a fast reply! I will try it now.

[pariah140]

@pariah140 you have to "share" the lottie, and a public json url is generated by lottiefiles website. You have to go on the json file in your browser and copy content ( or download file directly from this page )

Don't use the standard " Download " button or add to workspace button

@rsereir sorry to ask again. Once you are on the share page where are you downloading it from? I've looked in the network tab but all I see is a loader.json (which I presume is the lottie loading spinner).

[jrlmontejo]

I found that merely changing the color palette of the lottie file in the website editor will cause it to break. If you don't make any changes in the editor and download the lottie file directly, there won't be any issues.

[pariah140]

I found that merely changing the color palette of the lottie file in the website editor will cause it to break. If you don't make any changes in the editor and download the lottie file directly, there won't be any issues.

Yeah that works for me! Thanks a lot!

[dlwogus0128]

I found that merely changing the color palette of the lottie file in the website editor will cause it to break. If you don't make any changes in the editor and download the lottie file directly, there won't be any issues.

Thanks. That works for me too 😄

[Ruslan-BG]

@jrlmontejo can you tell me how you got it json

[matinzd]

@jrlmontejo Please report this issue to lottie team. Seems like there is a bug in their editor causing the animation to break.

[calda]

I figured out the underlying issue -- this animation's bezier paths are expressed differently than other animations. The inTangent and outTangent values are normally relative to each individual path vertex, but in this case the tangent points are absolute points in the same coordinate spaces as the vectors themselves. If I correct for this in the bezier path parsing code, the animation renders as expected:

However, I don't currently know how to detect this automatically.

[kudanai]

Cross posting response to similar issue on Android here: https://github.com/airbnb/lottie-android/issues/2508#issuecomment-2154252323

Can I quickly confirm two things:

If exporting from AfterEffects (bodymovin?) works as expected? If the broken Lottie came through the LottieFiles pipeline (editor/workflow etc)? Looking demo attached, I can see a bunch of "_render": True keys appearing in the Lottie, which is indicative of an incorrect export. This seems to have been a regression on LottieFiles for a minute there.

We've deployed a patch across the platform as well, so do give it another go now and see if the problem still persists.

[calda]

We believe this was an issue with the lottiefiles.com exporter, and not an issue with the iOS and Android renderer implementations.

[rsereir]

Personally i solved this issue by downloading directly the lottie file from the "official" json without lottie file editor ( i bypass completely the download button )

[himanshu1721]

Personally i solved this issue by downloading directly the lottie file from the "official" json without lottie file editor ( i bypass completely the download button )

Hey how do you do that. I am having a hard time figuring this out.