Website Animation

Introduction to website animations

Website Animations can be a fun and engaging way to tell users more about your brand or website. A good web animation collection can be used to give the website a more dynamic, enjoyable feel, and persuade users to engage more with your site.

Animations play an important role in website design and user experience. Web animations make a website more dynamic and they also increase the usability by making it easier for users to distinguish between content and graphical elements.

Because of this, animations have become an important component of website design.

Let's look at some different styles of animations used in website design, then we'll take a look at their formats, pros, and cons.

CSS Animation on Web Sites

CSS, or Cascading Style Sheets, is the modern way of formatting and styling a website. With CSS, you can control the look and layout of any part of your website—from links and paragraphs to images and Tables. This makes it easy to change the look and feel of any part of your website without having to change the source HTML or code. This saves a lot of time, especially if you have to change multiple parts of your website at once.

CSS Animations lets you define properties of page elements that change their appearance over time. They are performed in a separate thread, so they don’t interfere with the UI, and are guaranteed to be played in the correct order. In other words, they’re both very responsive and very reliable.

Web design company CreoLogic uses CSS Animations in a scrolling banner to highlight clients they have worked with. You can view this page at https://creologic.ca/.

Style sheets also support CSS Transitions which are a special case of CSS Animation. Transitions are more simple. They smoothly animate the transition of an element's visual state from one to another, and back again. Read more about CSS Transitions.

Video Animations

Web animations can also be displayed as short video files (or even long ones). In these cases, the videos are embedded on webpages such that the normal video controls are hidden from view. This has the effect making the animation appear to be part of the page, and not just a video viewer. Attract Media uses video animations to highlight work of previous clients @ https://attractmedia.ca/edmonton-web-design.

Here at Editable GIFs, you have the option to download your GIFs as videos instead. What kind of video you download will be dependent on the browser you are using. If you require an MP4 and your browser cannot accommodate you, Editable GIFs can convert it for you for download.

screen cap of mp4 download button
MP4 download button at Editable GIFs

GIFs on Web Pages

No discussions about web page animations is complete without mentioning gifs. GIFs go back to before 1989, but it was 1989 that they really took off. A new GIF standard was released in 1989 that enabled animation delays and transparency. And those two features allowed the functionality that we enjoy today.

Unfortunately GIFs have several drawbacks for website design:

  • They don't scale
  • Large files sizes
  • Can be default to create
  • Jagged edges with transparencies
  • Limited color sets

These can limit the practicality of GIFs for webpage development but used wisely they can still work. Infinite Ideas Web Designs has a cool GIF showing a phone display. It works because the background is white on a white webpage, the file size is just 2MB and it is a short duration GIF. Check it out at https://www.infiniteideaswebdesign.com/

Another point with GIFs, is that many of these concerns melt away with a little knowledge of their details. For example, a transparent GIF on a white background can still look great, and be of a small size. For example:

gif progress bar
GIF animation matching perfectly with white background

You can try this here at Editable GIFs, https://editablegifs.com/make/bars-5.

SVG Web Animations

SVG stands for Scalable Vector Graphics. A vector graphic isn't graphic that specifies the placement of dots, or pixels, but rather a vector graphic defines lines and other shapes. The size of the shapes is completely arbitrary which is the key advantage to SVG graphics - they are scalable.

The best example of SVG Animations today is probably LottieFiles (becauseIguesswedon'tlikespacesanymore). Check out LottieFiles here https://lottiefiles.com/.

As you can see, web animation took a big leap forward with SVG. SVG animations are really cool, they are fully scalable, small in file size, and, well, often just plain cute.

Canvas Animations for the Web

Finally we look at HTML5 Canvas Animations. Canvas animations can be the most complex yet powerful animations for web sites. A canvas is a rectangular portion of screen on which you can draw using JavaScript. This is how most web games are created today. In previous years you might have heard of Flash. The canvas has replaced Flash. You can play some simple games on the canvas at https://playSCL.com.

Incidentally, the GIFs create here are also drawn on the canvas before the GIFs are created. If you need to display images and animation on a fixed rectangle, you should considering learning to program for the canvas or finding a good animation tool that can help you do it.