Why doesn't opacity changing animation work properly as a gif?

Question

I've created loading animation in Photoshop, while it works perfectly when i play it from animations tab, It messes up after saving it.

This is how it looks when animation is played from Photoshop

But, this is how it looks when animation is saved as a gif

I don't really understand the reason. What i found out though, was that when saving as a gif, preview on "optimized" is the same as preview of animation in gif, Although preview in "original" tab is exactly how it should be.

Thus i think that the problem may be in Photoshop setup? Maybe opacity is specifically optimized? Is there any solution to get rid of this problem? Thanks!

Answer 1

Photoshop isn't messing it up. The GIF format only supports fully opaque or fully transparent pixels, but no intermediate levels of transparency.

Essentially, what you are trying to do is not possible with GIFs because of limitations with the GIF file format itself.

Solutions are certainly possible, but you'd have to get rid of the transparency, and use a background the same colour as your webpage background, then you could animate gradations of colour changing.