JSON lottie animation shows a corrupted file icon in Webflow, however the demo works

Design help Animations & Interactions
1

Ive imported a jpeq sequence to render a json file with bodymovin to import into lottie for webflow.

I followed a webflow tutorial for this step by step, but for some reason my json file comes out blank, and when uploaded to webflow it appears as a corrupted file icon. What am I doing wrong?

Edit: Also, the demo works. But when throwing the json in webflow its just that corrupted file icon.

Here is a link to my project file:

Someone please help!!

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

2

Hey dude it’s because you’re using a JPG sequence. The thing I have found that works with lotties is everything has to be shape layers in After Effects. So you’re S.O.L on using lotties with your current set up.

However you might be able to do something with Cinema 4D.
[Control a Cinema 4D animation with your mouse on a webpage — After Effects & Lottie in Webflow - YouTube](http://C4D webflow)

I hope that helps

3

Hi Ross,

Thanks for the response! So that video you’ve linked is one the one I followed step by step (minus the Cinema4D part). I essentially picked up from where he makes his project a JPEG sequence., and thought it would work the same way. He actually mentions that you can do this with a video → JPEG sequence and use bodymovin. So maybe I’m still missing something?

Hope this gives some more insight on how I’ve been trying to solve this problem.

4

Oh really? I briefly watched it just to see how it works. But I had the same issue importing AI files. I had to convert them to shape layers in AF to get them to show up.

I tired you’re AF file and tried to export 2 methods. I couldn’t get either to show up either. Sorry I couldn’t be more help.

What did you animate in the first place? That might be it but again really the JSON is rendering a JPG Sequence. So I would think that could animated in whatever platform.

5

I have an animation of device mockups showcasing some UI designs. They were made in Cinemda4D and templated out in AE so someone can drop in their designs. So i’ve been trying to export that as a sequence and then use bodymovin. So similar to what they are doing in the tutorial, but not directly starting from scratch in Cinema4D.

Appreciate the help! Do you mind sharing the methods you’ve done? I feel like I’ve tried everything lol. I would think this should work too, but AE cant include the jpegs for some reason. Strangest thing with all of this is that the demo works fine when i open it locally in my browser.

6

Sure. I just imported 1 exactly how He did the tutorial.

the other was as a single unit. Like I would for stop motion.

Than i export using body movin the exact way and compression he did.

7

Hello, I have same problem when I import the lottie file in webflow and I have no solutions.
I use a sequence jpeg, I have tried to compress in bodymovin, change frame rate composition (12,25,30), duration, scale down size composition, etc
And always the preview show me some pictures missing.
If anyone have a solution ?

8

Hi guys,

I just change jpeg to PNG and it works perfectly !