Buggs in animation when previewing in Lottie. It flashes in the motion.

[vleezer]

Dear Lottie team & Bodymovin team,

Today I've animated an Icon. It works well in mp4 version. You can view how it should look and how it looks in context here: https://wetransfer.com/downloads/cca1f6e65c1d07397a012fd688995f6120181205085751/2344eb

You can download the svg file here: https://we.tl/t-U4rhdyG7kD

Only I see that it bugs here with the Lottie test:https://lottiefiles.com/share/WplUAx (Turn background to black to view it). Some lines appear and disappear during the animation.

This is the tutorial I followed: https://airbnb.io/lottie/after-effects/debugging.md My aftereffects file: https://we.tl/t-hYd6PyL1lN

I use google chrome and safari. Aftereffects cc 15.0.1 is the one I use.

The developer I'm working with says that my file works wel when played the first time. Only when it loops will it go buggy.

How can I solve this?

Thank you for your time and attention on this matter. Looking forward to your response. With kind regards,

Viviane Leezer

[bodymovin]

Can you try the latest player? It seems to work fine with it.

[vleezer]

What do you mean with latest player?

[vleezer]

My developer says that the animation doesn't work anymore. We tested it on our site and it indeed doesn't work.

[bodymovin]

can you share a link?

[vleezer]

Here is the link: https://www.lottiefiles.com/share/WplUAx << white lines flash on and of during the animation. This is how it is supposed to look like: https://we.tl/t-g6LUAKw79s

[bodymovin]

I mean do you have a link where you tested the animation with the latest player and it doesn't work? I've exported the animation myself and it seems to work fine with the latest player.

[vleezer]

Where can I find the latest player? I'm quite new to Lottie so apologies if I'm a bit new to this.

[bodymovin]

You can get it from here: https://github.com/airbnb/lottie-web/tree/master/build/player or use the cdnjs version https://cdnjs.com/libraries/bodymovin

[vleezer]

I don't understand the player? I see a lot of code do I need to copy paste it somewhere? How does this work? Is my bodymovin perhaps exporting wrong? Which settings do you export in?

[bodymovin]

Not sure how familiar you are with web development, but some of the questions are beyond what I can answer in a github issue. Try adding a script tag to your html code with it's src attribute pointing to the cdnjs path: https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.4.2/lottie.min.js

[vleezer]

Unfortunately I am completely unfamiliar with web development. I'm an animator. Though you said that your export works well right? How did you manage that your export does work? Could you sent your file to me?

[bodymovin]

it's the same json file you exported. Try adding the Demo checkbox on the bodymovin extension panel from After Effects. It will export a demo.html file that you can double click to quickly preview the animation. For further development you probably should get assistance from a developer.

[vleezer]

Hi bodymovin,

The developer added the player but the animation still flashes while it plays. Quite strange that it doesn't flash with you. Are you sure it plays well with you also?

[bodymovin]

can you share a link with your implementation to check it out?

[vleezer]

https://codepen.io/dragnipur/pen/QzWRPQ

[bodymovin]

try adding animation.setSubFrame(false); after loading the animation.

[vleezer]

Bless you, this solved the problem! It apparently was a bug in the timing. Thank you so much

[ShirfyM]

You can get it from here: https://github.com/airbnb/lottie-web/tree/master/build/player or use the cdnjs version https://cdnjs.com/libraries/bodymovin

Hey, i try it with the latest player but its still showing the weird lines. https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.10.2/lottie.min.js

Bodymovin version - 5.9.5