Lottie-web: Lines around vector based objects and broken animations

[haleycoyle]

I'm having some issues with exporting through bodymovin

Some of my files are working great with exporting and others not so much.

When working in after effects, I have been importing my ai files and working off those layers..
Also I have been using transparent backgrounds, which are needed for the website i am building.
When exporting after this, the animation doesn't work properly and there sometimes lines around vectors and sometimes no lines around vector objects.
I then went ahead and changed my aftereffects file from AI layers to be all PNG Layers when exporting this way, animations with vector objects come out with lines around them similar to a gif on a web page. Now 2 of my animations with vector objects worked great, and one animation exported has lines around it.. Ive tried everything I know about changing it and there's not much info out there so now I am reaching out

Thank you,

Haley

[bodymovin]

There are two possibilities you can choose.
Ideally, you should convert your .ai layers in After Effects to shapes. (right click each layer and select "Create Shape from Vector Layer").
This way your shapes will be exported as vectors and you won't need rasterized images.
The issue with this option, is that sometimes AE adds an unnecessary extra path and a merge group you need to erase manually since merge paths are not yet supported by the plugin.

The other option is, as you did, use pngs. But AE doesn't handle transparency correctly when exporting pngs. So after you export, you can go to the images folder and replace the exported pngs with your original pngs.

Let me know if this makes sense.

[haleycoyle]

Thank you!

I have been changing all .ai layers to shapes, guess I could manually erase but that would take a lot of time.

As far as the PNG option, I have been replacing exported images with original images in two ways.
One renaming my originals to the same name as exported in the folder. Keeping them with in the folder.
Two by dragging the exported pngs to photoshop and swapping the exported with the original and saving the exported file. (meaning I drag the exported into photoshop, open up my originals, drag the original layer into the exported file then delete the exported layer and save the exported file)
When I do this I hope and pray it works but the animation is some how messed up and no longer works but the lines are gone

Thank you

[bodymovin]

Hi, did you get it working?

[themarten]

Hello, I've just run into this same issue.
Need to export lots of pngs but they all have the edge around them (especially soft edge alpha).
Any chance the export from After Effects can be fixed to use "fixed" alpha channel rather than "premultiplied"? Like the options you get in the "Render/Output" menu?
https://forums.adobe.com/thread/1064300

A workaround is saving all as Quick Export png in Photoshop, as long as those layers match the filename output by the AE Original Asset name (which is an awesome addition by the way), but it's always nice to remove any extra steps in the process.

Thanks!

[bodymovin]

I have it on my todo list.
There is a PR with a solution to this but I haven't found the time yet to fix it.
I'll take it probably in a couple of weeks.