Lottie Graphic Rendering

Hey everyone!
I’m new to animation and Lottie. I am having a rendering issue - which i’m sure can be easily solved by someone here. Check out the image attachment- 01%20PM|83x119 I successfully installed bodymovin and can export files. I have a graphic of two hands clapping that i created in illustrator and then animated in after effects. It is a vector file. When I upload to webflow the images shows the issue i’m running into. any help is appreciated. thanks so much!


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

Bodymovin is at ease with shapes, and will most likely default all the other things as PNG files, and you may have not checked the "include assets in json in Bodymovin prefs.

However here is the simplest workflow to keep your vectors as vectors.

In AI, open the Library window, create a library for your project. Make groups of your vectors and drag each group in the Library to create assets.

In AE, drag the assets from the Library window to the timeline. Right click each and select Create > Shapes. Now you have shapes, you can delete the previous layers. Unfold each shape layer to find the groups and you can copy paste your keyframes from your old hand layers where they should be.

2 Likes

Thank you very much Vincent! I missed the preferences section and thank you for the vector AI Tips.

2 Likes

I was having the same issue, then I realized I didn’t check include all assets, works fine thanks Vincent you answered it. :+1:t5::100:

2 Likes

@megobair @RonTodman be careful though: if you have worked with vector assets imported into AE, then end up with having to include assets inside of json, it means your assets are included in the json as bitmap images. Not good, you’re losing the benefit of vector: scalability and weight principally.

Make sure you transform your vector objects into shapes in AE by using the Create command. There’s a bit to learn around that but if you already know how to handle a layer and its transform, there’s nothing really new, it’s just another type of layer with possibly more sub elements (1 goup by vector sub element, with one or several paths inside).

Mastering shapes when you use Lottie is mandatory, because shapes are also the only kind of mask you can use that Bodymovin will export.

1 Like

Ok, Thanks Vincent, I will definitely keep that in mind. :+1:t5::100:

1 Like

You may find this plugin useful. It imports illustrator files to shapes really quickly.

1 Like