That GIF weighs one third of a megabyte. You could literally fit a fully featured bespoke 2D/3D rendering engine in the same space. Now, it could probably be optimized, but an aPNG would likely be vastly smaller. And these days aPNG is even reasonably widely supported! That said, an animated SVG would likely be the best option.
What is your point? The random first GIF I found is enormous in pixel size and many frames, thus large in filesize, but a few dancing green blobs would be tiny. You don't need that one's 640px size to scale, and 2x will work perfectly fine.
I’m looking at that on an iPhone, and if I scale (in either direction, pinch or zoom) it I can see a semitransparent halo around it, I would assume from the antialiasing.
You really don't need an alpha channel for some tiny lineart thing such as the article's example. A single color would even be perfectly sufficient to make an attractive 'dancing bars' animation to indicate "sound is happening." That's my point. Some overpaid "UX designer" decided something wildly complex was needed here, and they're wrong.
In the broader sense, especially in the 'flat design' era where we don't use gradients or complex backgrounds anywhere, a 256-color GIF with its 1-bit alpha (plain transparency) will work perfectly fine to do an animated flat non-3d, non-photorealistic icon that wiggles or whatever, on a background that is almost certainly a plain flat color, and not complex enough to need 16 million shades of transparency.
Is this the frontend developer's version of "Postgres doesn't scale. Mongo is Webscale"?
Here's a 640x640 GIF. Scales just fine for me, to half-size or to 100px. I'm using a "Retina" screen. https://cdn-icons-gif.flaticon.com/6172/6172533.gif