Keeping transparency in lottie files

Hi Folks!

Does anyone have any experience in maintaining transparency in Lottie files?

From After Effects, you need to put in through the decoder first, then change the output to Alpha + RGB. But in order to get it onto webflow it needs to go through Bodymovin plug-in. As far as I can see there is no option to change the output. So when you render you lose the transparency.

Hey @Gareth_Ellison

Bodymovin supports transparency generally speaking, getting the composition to work as expected can be tricky though.

You could potentially lose transparency if you use unsupported elements / properties or effects in AE that mess with the export to .json. Some fill effects do that…

You could check your project for inappropriate used features here

Can you provide the .json file that you are having issues with?

I would advice to test your problematic elements in an isolated Environment, meaning create a new file that is super barebones and export it to see if your basic setup is faulty or not and then go step by step to find the origin of the issue!

Best of luck, ask if you are stuck :upside_down_face:

1 Like

Hi RDaneelOliwav!

Thanks so much for such a detailed response. Super helpful! The link will be invaluable in the future!

Not sure how to transfer the Json file onto here. But its under the lottie files on this practice page if you can view it.

https://preview.webflow.com/preview/gareths-top-notch-project-2f6948?utm_medium=preview_link&utm_source=designer&utm_content=gareths-top-notch-project-2f6948&preview=321408d72e726b03d333170e8e81b655&workflow=preview

It’s the last lottie file added. It’s a simple enough sheen added over the top that last a few seconds. I’ve checked that amazinly handy sheet you gave. It does say there would be a problem with export if alpha matte is selected. But then there is no way to change to alpha matte for export through bodymovin ext anyway as far as I know? But as far as I was aware in order to keep transparency you needed alpha matte. But then, I have done many before this where I haven’t changed it to alpha matte and it’s remained transparent.

Thanks a lot for all your help.

Processing: UNICUS Transparent.json(PNG Sequences).json…

I found only one lottie, it’s a white closing animation.
I looked at it in the lottiefiles viewer - it seems fine!

Hey RDaneelOliwav

I’m still at a loss what I’m doing wrong when exporting. I’ve watched hours of vids, looked at all the online articles I can get my hands on.

Question: When exporting, do you know why sometimes you use Media Encoder in AE and other times you don’t?

Weirdly, files do not work without putting it through the encoder. But when using encoder is when you seem to lose transparency. I’ve attached a screen print of how my Json files show half empty when I export directly through body movin? Compared to when I encode the graphics first, which shows a full file with blue tick. Any suggestions?!

Screenshot 2021-09-23 at 15.57.30|690x323