airbnb / lottie-web

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

Simple line trim path delay issue #2512

Open ision-industries opened 3 years ago

ision-industries commented 3 years ago

I can't quite pinpoint where the underlying issue is but I will try to present my problem. Here is a screenshot of a simple path I set up in AI. Screen Shot 2021-04-07 at 10 43 11 AM

I have added rim paths to the line but when rendering to Lottie it renders incorrectly. Here is a screen recording comparing how the animation plays in the timeline vs how it renders to Lottie. I have the timeline setup as the line retracts the colors on each individual dot shifts as well. But somehow rendering to Lottie messes up the choreography between the keyframes. Screen Recording

I am using AE version 17.5 and this issue is persistent when I playback my previews on Google Chrome and Safari. I cannot share my project file as this is a client project.

bodymovin commented 3 years ago

hi, if can share a link with a reduced example, I can check it out. Using the video, I won't be able to debug it

ision-industries commented 3 years ago

@Hernan-Dev I did find a work around but I'm still curious why it displays like this in the first place with the current settings. But here is that project file for you.

For this render: I have the trimmed path line setup with dash and gap values so that there appears to be 4 equally sized dashes along the line path. I should note that it's just one singular line path acting as 4 individual dashes if that makes sense. I have the trim multiple shapes option set to "simultaneous" in this render and that' s what seems to be causing this "delay" issue.

For the workaround: instead of using one singular path acting as 4 dashes. I setup 4 individual line paths on one shape layer and set the trim multiple shapes option to "individually". It fixed the "delayed" issue between the line and the dots colors changing.