Can GIFs Be Transparent?
The GIF format has evolved with time, but it is still limited by its inability to be transparent. However, there is hope! There are new formats being developed that will allow GIFs to be transparent, one such format is called “Lottie” and was developed by Airbnb (yes, that Airbnb).
Search For Yourself
Go on, try it yourself — go to Google and type in Transparent GIFs. Yes, there will be plenty of search results but if you click through to any of the GIFs (and download them) what you’ll find is that they have a grainy border around them that is very pixelated.
GIFs can technically be exported with what’s called an ‘alpha matte background’ layer which forces them to crop most of the background but leaves a very undesirable grain.
Looping Transparent Animation
Check out the looping gears here, they feature a seamless loop without any animation ‘skip.’
Transparent animations, such as this animated icon, are actually a in a web format called “JSON or Lottie.”
The benefit of a JSON animation over a looping GIF is that these formats will support a fully transparent background and load faster.
Transparent Background GIFs
A popular request is to overlay an animation over your background or make the background itself animated. For requests like this I typically recommend going the HD video route and embedding the animations where needed.
Depending on your website setup, it might be worth chatting with developer to get a sense of their capabilities for the installation.
Creation Process
The looping gif-style animation above was created in two separate stages. The design was first created in Adobe Illustrator, which was then imported into Adobe After effects to animate the components.
Once animated, the coded version was created with transparent background. Learn more about GIFs here.