Keeping Transparency on Lottie Files

[defaultk883nvvqpnfu]

Hi Folks. I wonder if someone would be greatful enough to help with this one.

When attemtping to export an animation from After Effects to use on Webflow, it seems to loose it's transparency. The way I am exporting is by going through the encoder first, then bring the sequence of Jpeg files back into AE, then exporting through the plugin body movin.

I have done a few animations and has worked fine. Now every file I export comes with a black background so are uselesss.

Any help would be incredible.

Many Thanks

[RobShultz]

Jpegs don't support transparencies.

Perhaps you're converting to Jpeg from a still format which supports transparencies.

That would be where I would trouble shoot first.

[defaultk883nvvqpnfu]

Hi RobShultz. Firstly sorry about the delay in getting back to you. And thank you so much for taking the time out to help me out. It's very much appreciated.

RobShultz, you say JPEG dont support tranparencies. I understand this. But the only way the bodymovin plugin works it by converting to JPEG. I have had a lot of designed animations in AE convert nicely over to Webflow with full transparency from JPEG. So I'm trying to pinpoint whats changed. The previous animations were also a lot more complex. The one I am attempting to transfer across is a simple video in the background of text.

I know that when I seem to loose transparency, is when I run it through the decoder and save as JPEG files, then when I bring them back across into the main project to run through bodymovin plugin I loose transparency. So I'll look into all the decoder options.

Can you further clarify what is meant when you say "converting Jpeg from a still format"? Forgive my lack of knowledge.

[OussK]

First JPEG not supporting transparency background, second I think you doing the wrong steps, the idea of using lottie and body moving, is to export a JSON file not even a rasterized image. check this link to learn more https://www.schoolofmotion.com/blog/json-in-after-effects 

[defaultk883nvvqpnfu]

Hi OussK. Thanks for your reply. Can you further clarify what you mean by "not even a rasterized image"? I'm following the steps I've always followed and have previously been transfrerred across without any issues. I've outlined the steps I take to attempt to transfer to Webflow. Maybe yourself or some other kind person can pick up where I'm going wrong. Thanks so much for the useful link. I'm going to go through everything to learn more about the subject. Really helpful.

This is for a basic video in background of text:

> Add Adobe Media Encoder Queue

> I select Comp1 JPEG options(my understanding is that in order to go to Json it has to be JPEG?)

>Press play icon

>take all the JPEG files saved, bring it back to a new main project

>drag all Jpeg files into the composition

>Double check everything is still working

>Then simply window>Extensions>Bodymovin

>Select the file

>Change settings>assets to show include json 

>Render

This is the sequence that was taught through the webflow tutorials and the one I have been using so far. Mainly without any problems.

Any help would be amazing.

Thanks so much.

[Mylenium]

Agree with the others. It seems you are not understanding/ have wrong expectastions how these extensions work. Outside that of course we would need specific info about your composition and project, assuming you used correct procedures. Screenshots tell a lot, you know.

Mylenium

[defaultk883nvvqpnfu]

Hey Mylenium, thanks also for kindly taking time out to try to help me. As you can tell, I am new to this. Maybe if you could kindly clarify what you mean by wrong expectations of how these extensions work? How do they work? My understanding is, that Bodymovin plugin was designed to convert files over to Json so could be read on and used on webflow or maybe other platforms? Is this not the case? I have watched many tutorials where beautiful motion graphics have been made and added to a website build. Would you say my expectations are accurate? If you could help clear this up.

Thanks so much advance.

Gareth.

PS I have included the sequence I use to attempt to transfer to working Json with transparency.

[defaultk883nvvqpnfu]

Right, so first thing, I've realised video files and GIF's don't work on animations as they can't be translated into code. The second thing I need to figure out is why some effects need to be put through Media Encoder and others don't. For some reason now, all my AE content now doesn't work without encoder, when some used to. More research and learning to figure it out. 🙂

[Fabien5C1F]

Update just in case some one like me is looking for how to access to transparent background… it's that simple 🙂
https://www.youtube.com/watch?v=kshhUmerejw