airbnb / lottie-web

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

Line cap glitching on animated path #3017

Open lieselotverh opened 11 months ago

lieselotverh commented 11 months ago

Tell us about your environment I'm making an animation in After Effects CC2023 and export it with Bodymovin (5.7.6).

What did you do? Please explain the steps you took before you encountered the problem. I manually animated a wave path. Then I duplicated the path and made the stroke width bigger. I added a trim paths and changed the start and end values so this thicker stroke is shorter. Then I animate the offset so this thicker stroke moves along the wavy line.

I also changed the line cap to a round cap - though it doesn't seem to matter if I use a round cap or not. With all caps there is a glitch.

What did you expect to happen? I expect the trim paths stroke to smoothly animate along the wavey line.

What actually happened? Please include as much relevant detail as possible. When I drag the json file in the preview, the line cap glitches. I noticed that when I remove the keyframes from the path property, it doesn't have a glitch.

Please provide a download link to the After Effects file that demonstrates the problem. https://drive.google.com/file/d/1kMI3w9MIvikphtJWR8lDrBw7oYT49m65/view?usp=sharing