Json file exported from After Effects not working in Webflow

Hello, hoping to get some help understanding how to get Lottie animations to work.

For our animation we have used an animated GIF imported into After Effects and exported it using the Bodymovin plugin but the Json file, when loaded into Webflow using the new Lottie technique is not working, it just shows as a blank container. Should the GIF have worked? And if not a GIF should importing a movie file of the GIF work instead? Or does the animation have to have been created in After Effects if using After Effects to export the Json file?

You can see our test here, Animated Vine
Our Lottie test is the empty black bordered container near the bottom of the page, the animation beneath it is the downloadable example asset from Webflow used to check as a control.)


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hi @grantsenior,

The lottie animations JSON files in Webflow work only with vector elements, which a gif file doesn’t have…

Yes, a gif file would work in Webflow, but better a webm video compressed file will give the best SEO results.

Ok, good to know. Thanks Avivtech!

1 Like

You can use image sequences. This video goes through that process.

For you, I’d imagine you could use AE to export your animation as image sequence, then follow along in the tutorial. Make sure to set settings in bodymovin and export assets.

Thank you Akolea, that looks like it may be what we’re after.
Cheers!

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.