Have you exported a GIF / MP4 video using Anima and it doesn't look sharp? Here are the common cases and solutions.

Transparent GIF

Although GIF format can have transparent pixels, GIFs do not allow partial opacity. I.e - You can have a fully transparent pixel, but not 30% transparent.

So when your GIF background is transparent, and you're using shadows or text that have smooth edges with opacity, it becomes less pretty in a GIF.

The proposed solution here is to have a background color, i.e white.

GIF Color Palette

GIFs have a limited color palette, it can only have 256 colors.
Due to this limitation, rich gradients, or bitmaps, come out less pretty when exported in a GIF.

To get better results, whenever possible - use an MP4 with auto-play, no-controls & loop. This is possible in HTML, and also when adding a video Smart-Layer with Anima to your Prototype/Website. iOS devices already support auto-play videos since 2016.

Retina Screens

When previewing an animation on your Mac's retina screen, you actually see a x2 resolution of your design. For example: if you're making a 400x300px video, your preview is actually 800x600px.

So when you export your video, and it's 400x300px after export, it might look less sharp than the preview.

The solution here, if you wish to export a version for retina displays as well, is to work in a x2 size in advance. For example, if you're planning to show a 400x300px video on your website, make it 800x600px.
Then, when embedding it on your site, give it the original frame size (400x300) - Retina users will see the fine (x2) version, and non-retina users will see the less-sharp version.

This is pretty similar to working with x2 images on retina iPhones.


We hope we've got you covered 😊

Learn More

Did this answer your question?