1

I created an animation in the following way: sketched some basic shapes in Figma, animated it using Jitter, exported the animation json and importing it to Lottie then downloading the Gif. I wanted to use all the free options hence the struggle with the different mediums.

My shapes include a rectangle with a background shadow. In preview mode, both in Jitter and Lottie, the animation looks ok, but when downloading the gif, the shadow is cut off and it has some glitches.

Does anyone know why this happens? Or know of some free and reliable animation tool? I tried different Figma plugins that seemed to work, but couldn't download the resulted animation...

I attached below a picture of the rectangle and the result.

This is the rectangle with shadow

This is part of the result

Improve this question
1
  • Hi. Welcome to GDSE. GIFs are in Indexed colour only. That's likely the problem. GIFs are an ancient web format and not really suitable for anything that has a colour gradient, or gradation of transparency (which is completely unsupported anyway). You can sometimes get away with using dithering in GIFs to simulate a gradient, but they will still look like crap essentially.
    – Billy Kerr
    Aug 17, 2022 at 10:01

1 Answer 1

Reset to default
1

The GIF format only has 1-bit transparency, something is either transparent or it's not.
There is no in-between.

There's no such thing as a "fade" for opacity in the GIF format. And it's not possible to animate any "fade" or opacity variation in the GIF format.

Photoshop related, but the same issue here: GIF with Transparency Gradient (Photoshop)

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.