Our brains are wired to respond to motion and using a bit of animation on your digital sign is an obvious and simple way to help capture your audience’s attention. ScreenScape allows users to add animated GIFs and SVGs to their media, so once you’ve created an animation, adding it to your ScreenScape digital sign is relatively easy. Here are some basic tips that can help you get going with animations.

You should follow these 5 basic rules for using animations in your digital signage:

  1. Don’t over-do it. Just because it can move doesn’t mean it should. Too much animation can not only distract from your message but can even cause some people to feel nauseous. Nobody wants their design to literally “make someone sick”.
  2. Try to avoid animations that will distract from your overall message. Make sure your message is always the “star of the show”.
  3. If animating text, make sure it remains on the screen long enough to actually be read and understood by your audience.
  4. Remember some people will glance at your digital sign for their 1.5-3 seconds before the animation has started. Ensure any animated text is not essential to the overall message. If the animated text is not on the screen yet, does the message make sense without it?
  5. Animations on the periphery are more subtle and interfere less than motion in the middle of your audience’s field of view. Fading elements in by changing their opacity is far subtler than moving an element across the screen.

GIFs vs. SVGs

GIFs
At this point, pretty much everybody is familiar with GIFs. Even my eighty-year-old mother is capable of zinging me with a well-timed GIF in our Messenger chats. Although prolific, GIFs do have their drawbacks. Essentially a GIF is a series of images that play one after another to produce an animated effect, so file size can often be an issue (remember ScreenScape limits image file sizes to 12MB). GIFs also don’t handle transparencies all that well, and because GIFs only use 256 colors, sometimes your image may end up dithered or otherwise glitchy-looking. Editing the timing or position of your GIF animation’s elements also requires having to completely rebuild the GIF which can be time-consuming. GIFs are also resolution-dependent which means that if you scale the dimensions of your GIF up to a larger size, your animation will appear pixelated (you can read a bit more about pixelated images in a previous blog post “Choosing the Right Images for Your Digital Signage”).

SVGs
SVGs are becoming more and more prevalent in today’s digital environments. SVGs are resolution-independent making them appear clean and crisp at any size or resolution. They also have a proper alpha-channel and make use of the entire digital color spectrum (millions of colors), so they have no problems handling transparencies and your colors will always look great. Also, editing your SVG animation is usually as simple as adjusting a few lines of code which is a real time-saver.

Pulsing Circles GIF
GIF
Compressed
Filesize: 2.6MB
Pulsing Circles SVG
SVG
No Compression
Filesize: 102KB

 

SVGs are superior to using GIFs in many ways, but don’t run out and convert all of your GIF assets to SVG if you don’t have to. If your GIF is below 12MB, doesn’t depend on a transparency, and is of an acceptable quality, go ahead and use it.  If you haven’t already, we suggest that you setup a free account and do some experimenting!