Skip to main content
11mo ago

Black outline on the edges of the transparent gif export

Reported this a long time ago via discord, but the problem is still present 😕 When rendering transparent gif files - there's always a black outline on the edges of the elements. In gif format we can only have 0\100% opacity in the pixels, so to get nice aliasing - some other apps have two options - use an "matte color" option to set the color matte and smooth the edges, or render the gif without matte and have the sharp edges. Seems like Rive is using the first variant, without any ability to change the matte color at least (but will be better to have the second variant where there is no matte color, even if the edges will be sharp)

Attached is a rendered GIF from Rive as an example.

4 replies
11mo ago

Hi thanks for reporting, will share this with our developers. Can you share the .riv file with us?

11mo ago

Nothing special there, this is just a fastest and -as basic as it could be- test filem the issue can be reproduced with any animation (just the artboard needs to be without background fill to render transparent gif obviously)

new_file.rev
14 KB
11mo ago

Thanks! will share this with developers to take a peak.

(edited) 11mo ago

... as a follow up - it's definitely related to the matte option, as here's what we get if opacity property will be animated in Rive and in AE (without matte option enabled). I understand that it possibly was done like this intentionally to be able to see opacity changing, but in fact it makes no sense as in fact it won't be transparent. If you're rendering transparent gif - you'd expect it to be actually transparent and with the original colors, without any secondary color added :) So it's better to have direct 0\100% opacity changing while keeping the original color, instead of "kind-of" animated opacity with black matte and the same bleeding on the edges (imagine if it is supposed to be placed over white page or so, that's completely ruin it)

Rive (white shape, 100-0-100 opacity animated only):

AE (yea, it's not visible in light mode of the page because there's no bleeding on the edges and no matte color, exactly how it should be),
Opacity 100-0-100 easeInOut:

Position left-right, 100% opacity: