Lottie Files - Body Movin Plug In

Report · Jul 08, 2021

Hey! Does any of you kind people have any experience with using the bodymovin plugin to convert AE animations to JSON files?

I'm just doing a basic handwriting effect and plays out perfectly on AE. But when I export it, the things a mess. It writes all at the same time and misses out half the letters?

Any help would awesome.

Thanks folks!

Gareth.

Report · Jul 08, 2021

You have to be very careful with this design and follow all of the recommendations. If I were doing what you are describing, I would use Animate. Using AE for web graphics is a lot like driving nails with a screwdriver. You might eventually get the job done but it's not going to be pretty.

Report · Jul 08, 2021

You have to be very careful with this design and follow all of the recommendations. If I were doing what you are describing, I would use Animate. Using AE for web graphics is a lot like driving nails with a screwdriver. You might eventually get the job done but it's not going to be pretty.

By @Rick Gerard

Hi Rick. Thanks so much for your input. I'm confused, I thought AE was designed to be used anywhere? If not where is meant for? And is Adobe Animate better suited for this type of thing? There are a ton of tutorials for these type of graphics?

Forgive me as I'm new to all of this.

Thanks

Gareth.

Report · Jul 08, 2021

After Effects makes video. Video on the web requires a media player. Bodymovin is a hack that can take a limited type of source file (vectot) with a limited number of effects and most of the time create a script based animation using code that will probably work on a website.

Animate is resigned from the ground up to create web-based animation. Like I said before, if you work hard enough, and you are very careful, you can drive nails with a screwdriver but the job will be easier if you use the right tool.

Report · Jul 11, 2021

After Effects makes video. Video on the web requires a media player. Bodymovin is a hack that can take a limited type of source file (vectot) with a limited number of effects and most of the time create a script based animation using code that will probably work on a website.

Animate is resigned from the ground up to create web-based animation. Like I said before, if you work hard enough, and you are very careful, you can drive nails with a screwdriver but the job will be easier if you use the right tool.

By @Rick Gerard

Hi Rick, thanks so much for sharing your knowledge and experience. The way you explained it makes sense and clears things up for me. I think I will look into adobe animate further, as I'm only just getting started with it anyway. So if Animate is purposely built for web effects, of course it makes more sense to learn that for what I'm doing.

Thanks again Rick. Really appreciate your help.

Gareth.

Report · May 18, 2025

This conversation was also so helpful for me. I also have been struggeling with the same thing and finaly saw this and got some advice. How did Afobe Animate turn out for you, better?

Report · May 19, 2025

Just in case you're still looking at BodyMovin, I talk about this a little in my Transparencies from After Effects video.

During the prep for that, I realised how awkward it was to preview the lottiefiles locally. So I shared some HTML and how to run it using MS Visual Studio.

Lottie files link: https://www.dropbox.com/scl/fi/v014jnm9xybeevh98ykl2/lottie_example.zip?rlkey=so0o02756swf0xe5wdq6ab...

This link should take you to 10:46 where I talk about bodymovin : https://youtu.be/PS5nPDpVM0E?si=sJJL8R9tFMTBLTz2&t=646