Lottie-web: png alpha dark outline

Created on 16 May 2017 · 17Comments · Source: airbnb/lottie-web

(Sorry if this is a repeat, couldn't find it in the search)

When png's are rendered they get a dark outline. This is especially noticeable when using blurry edges for an image.
boom_dark
alpha_blur

Seems like the export uses premultiplied using black? Changing the comp bg color doesn't make a difference.

Can we save them as "straight" alphas instead?
boom_correct
bluralpha_correct

It is possible to select this in the AE Render Settings/Output/Video Output/Color/Straight(Unmatted), but not in Bodymovin Render.

The only solution now is to resave the pngs from Photoshop.

Source

themarten

Most helpful comment

I fixed the issue and pack the zxp myself:
https://github.com/bigxixi/bodymovin_fix/raw/master/bodymovin5.1.9_fixed.zxp
Download it and reinstall bodymovin, I use https://aescripts.com/learn/zxp-installer/
It works fine on my AE CC 2017 on MAC, and tested OK on some of my friends' PCs.
more details:
https://github.com/bigxixi/bodymovin_fix

bigxixi on 26 Mar 2018

👍3

All 17 comments

@themarten I try to change the way bodymovin render png, and it works fine for me:

download this sourceHelper.jsx
https://github.com/bigxixi/bodymovin-extension/raw/master/bundle/jsx/utils/sourceHelper.jsx

goto the plugin folder and find the sourceHelper.jsx in
WINDOWS:
C:\Program Files (x86)\Common Files\Adobe\CEP\extensions\bodymovin\jsx\utils\ or
C:\AppData\Roaming\Adobe\CEP\extensions\bodymovin\jsx\utils\
MAC:
/Library/Application\ Support/Adobe/CEP/extensions/bodymovin/jsx/utils/

(or just search the name in your machine)

back up the original sourceHelper.jsx , then replace it with the downloaded one.
restart bodymovin and export your comp with png.

Hope that can help.

bigxixi on 17 May 2017

❤1

Thanks, but now the Bodymovin extension won't open in After Effects. The Extension is listed in the menu but when I click it no window shows up. Other extensions work fine. If I revert to the old file it works.

themarten on 17 May 2017

@themarten sorry i havent test it on other machines.
try restart AE?

bigxixi on 17 May 2017

No luck. I restarted AE and reinstalled Bodymovin multiple times, tried the new and the old sourceHelper.jsx. I'm on a PC, Windows 10, latest After Effects CC 2017 and Bodymovin version. Any ideas?

themarten on 17 May 2017

I am on Mac, AE CC2014, bodymovin 4.6.7, and works fine...

bigxixi on 17 May 2017

I'm using bodymovin 4.6.9 from 5 days ago.
Any chance you can try on a PC?

themarten on 17 May 2017

I think the issue is related to how you installed the plugin.
If you did it from the Adobe addons store, it seems to do some check on files and you can't modify them.
Regarding @bigxixi's solution, I'm trying to see how to add it to the project.
I've done some tests and it doesn't work well with CC 2014.
And also you need to tolerate the render chime going crazy if you have more than one asset :)

bodymovin on 18 May 2017

Right. I installed it using Anastasiy's Extension Manager (he makes Magpickpicker for Photoshop, the only way to install that extension) which has worked fine including the latest bodymovin.

Render chime? I have lots of assets.... Looking forward to hearing what "go crazy" means.

Thanks for looking into this. Very nice of both of you. Much appreciated.

themarten on 18 May 2017

@bigxixi your solution does not work for me, I'm using CC 2017 on Mac.
@bodymovin is there any way to fix this?

zmax91 on 5 Jun 2017

For mac user (I'm using macOS Sierra with AfterEffect CC 2017), just download modified version of bodymovin from @bigxixi 's repo: https://github.com/bigxixi/bodymovin, I installed it through ZXP Installer, replaced original bodymovin, then the black border is gone, everything comes great again.

machinefixer on 20 Jun 2017

Came here to ask the same question about the ability to use straight alpha. Has there been any progress on this? The workaround obviously is to export your own pngs with straight alpha and replace them in the folder but that gets tedious after a while. Thanks!

pegeseus on 30 Jan 2018

@pegeseus Hi, no progress yet.
But I'll be working on this soon.
Meanwhile, you can target another folder with your own pngs instead of replacing the ones on the images folder when you load the animation. So they don't get overwritten every time you export.

bodymovin on 31 Jan 2018