What formats are commonly used in animated elements on web pages?

Question

What is the industry standard format for animated elements on web pages? I know these can be videos and GIFs, but it doesn’t seem as if these formats are providing high enough quality, and video files get too big that slows down the loading speed of the page.

Are vector animations created in Adobe Animate able to be used as animated vector graphics on web pages?

The second part of the question is that while I’m using Wix to create a webpage, there are vector graphics that can be set to have an animated effect (the more simplistic types, like those in PowerPoint and Google Slides, fade, reveal, glide and such). Is this handled by HTML/CSS/Javascript somehow?

Answer 1

That depends a lot. A whole lot can be achieved using the most basic web languages like CSS, other stuff is done using a canvas, others even more different.

Generally, I can't tell you what 'most' use, but I would reckon anyway that the used technologies aren't always necessarily the theoretical best.

I know this is rather broad, but since the question is as well, I find this to be a fitting answer.

About Adobe Animate: I haven't finally tried that yet.

Regarding the last part of your question: it could be a combination of svg (the vectors) and css or javascript (for animation) [meaning it can be done] - but as I said, that doesn't mean it is - it really depends a lot on who you're working with from what I know.

Hope this helped a bit. PS: Better ask a little more specific next time, but searching for the stated technologies can already give you great answers on how this kind of stuff can be done - simple but true adivce imo ;)

Answer 2

There is no standard. There are several standardized options. Here is a list I made a while ago.

but it doesn’t seem as if these formats are providing high enough-quality

As always. It depends. Quality is a process. You can have a multi-million dollar production and put it on a YouTube video. You need to define what high enough quality means to you. Have you seen animated gifs from Dribble? some of them are awesome. You need to know your stuff to make a high-quality product. If the parameter you have is an animated gif for a sticker on WhatsApp, probably not.

Are vector animations created in Adobe Animate able to be used as animated vector graphics on web pages?

I do not use it. The last known to man animations made by a proprietary format was Adobe Flash, so the question is on what formats Adobe animate export?

A screen capture of the official Adobe page:

...Video and animated gif n_n

The same with Wix. I do not use it. But you need to focus.

Is this handled by HTML/CSS/Javascript somehow?

Everything, everything is handled by HTML, CSS, and JavaScript somehow on a webpage.

• Can a fade-in effect be handled by CSS alone? Yes.

• By HTML alone? No. Html is for content, not form.

• By Javascript alone? Yes, (but triggering CSS in the back)

• By using a video? Yes, but do you really need it? Is it a loop? Is the content originally a moving video? Is it a still image?

• By animated gif? Yes. But for a fade is a waste of bandwidth and it will most likely be dithered.

• By SVG animation. Yes (but using CSS at the back)