Streaming live at 10am (PST)

Lottie animation not working

Hello! I’ve been having trouble when trying to preview my lottie animation. I followed all the steps from installing the Bodymovin plug-in and setting up my After Effects preferences, but still my animation doesn’t work…

Just to give you some context, in After Effects I set up the file with a RGB + Alpha because I want a transparent background (I don’t know if that could be the problem)

These are the issues that I’m having:

  1. When I drag and drop the lottie file into the canvas it doesn’t appear, it only shows the “Lottie Animation” label

  2. Sometimes it does displays the preview of the lottie file, but when I enter the preview mode or upload the site the animation doesn’t work.

Hope you guys can help me! Thanks!


Here is my public share link: LINK
(how to access public share link)

Can you share your .json file, and your .aep file? You can use Dropbox and anything else. Also consider sharing your read-only link.

Sure! Here’s the link with the files: https://drive.google.com/drive/folders/1KpqxRh8CBt9v6aJyWNxqwJeY4-zi_sqj?usp=sharing

And here’s the read-only link:
https://preview.webflow.com/preview/website-project-4f163c?utm_medium=preview_link&utm_source=designer&utm_content=website-project-4f163c&preview=84094800edea4c799cfcd3b94b3d9972&pageId=5d7edcb828ecca40b9dbaf83&mode=preview

I think something weird happened with my response, but here it is again.

Sure! Here’s the link with the animation files:
https://drive.google.com/drive/folders/1KpqxRh8CBt9v6aJyWNxqwJeY4-zi_sqj?usp=sharing

And here’s the read-only link:
https://preview.webflow.com/preview/website-project-4f163c?utm_medium=preview_link&utm_source=designer&utm_content=website-project-4f163c&preview=84094800edea4c799cfcd3b94b3d9972&pageId=5d7edcb828ecca40b9dbaf83&mode=preview

Hey there,

I’m having the same problem, but only for certain files. In my example, 2 of the lottie animation made in AfterEffects via Bodymovin plugin worked, but one of them is invisible, and the preview shoes them as place holder icons. Please see screenshot.

Please help! Thanks,
Yvonne

Nevermind, I figured it out. If I used illustrator layers in AfterEffects, it will not render correctly for Lottie. I just created vector shape layers from the illustrator files and it exported fine.

1 Like

I think it depends on the effects that you applied, I think that was the reason it wasn’t working with my asset, here’s a link I found about that https://github.com/airbnb/lottie-web/issues/515

1 Like