07 of 12

New Challenges

Discovering GIFs and learning SVG animation is the beginning – learning how to best use these formats is the other part of the challenge.

Making my first ever animated GIFs I found that I really enjoyed the process, even if the outcomes were very basic.

Researching how to make more advanced animated GIFs I came across how to use them in advertising, which is a useful application of a simple type of animation.

From a usability point of view the GIF file format is preferable to Flash as it works across most platforms and devices – unlike Flash.

As an example, here are the individual images that makes up one of the basic GIFs I created during my initial session:


And here is the GIF itself:


When it comes to SVGs and in particular using animated SVGs on the world wide web there are more than one issue to deal with.

Scalability is not one of them, as SVGs scale very well – and is why they work well online.

Animation can be done in a few different ways:

  1. CSS3
  2. JavaScript
  3. Editing the SVG file directly

For use on the web, I will likely have to do some or all of the above, depending on how complex the outcome needs to be.

After researching the subject matter I’ve come to the conclusion that I should use SnapSVG (http://snapsvg.io), even though I’ve looked into using a different JavaScript library called GreenSock (https://greensock.com) in the past.

As my Design Bridge project is a web site which is utilising animated SVGs to tell a story I have good reason to learn more about how to make the most of this format.

To conclude:

These short animated sequences do appeal to me and seem somehow manageable.

I enjoy telling a story is a simple format, which is a new discovery for me, and I will carry on learning more about how to best use these in real life applications.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s