Motion design is most commonly associated with video and film, but incorporating motion graphics into your web projects is easier than ever before. Here’s a breakdown of the four main tech tools used to create motion graphics on the web today, plus their strengths and weaknesses.
In the early days of the web, animated GIFs were the main way to get motion on websites. (Think animated mailboxes…) Animated GIFs are a series of images layered into one file to create the illusion of motion. The saying “what’s old is new again” applies to animated GIFs—despite their pre-Web-1.0 origins, designers still use them to add small bits of motion instead of Flash because they work on all devices. (And people are turning the GIF into a real art form.) You can make animated GIFs easily with image editing programs such as Adobe Photoshop. Learn how to make an animated GIF here.
Easy to create and work on desktop computers and mobile devices.
Can only create non-interactive animations. Some restrictions on size, because file weight rapidly increases with the image dimensions and number of layers.
Before we go any further, we need to separate Flash the program from Flash that’s compressed as an SWF file to play with the Flash plugin in a web browser. Flash the program is owned by Adobe and is part of the Adobe Creative Suite 6 Design & Web Premium. It can publish to file types including SWF, MOV, PNG and animated GIFs. In CS6, it can even export files as HTML5 framework with the CreateJS Toolkit extension.
Native Flash SWF files don’t work on Apple’s iOS digital device platforms. Advanced action-scripting functions may be difficult to use for non-programmers.
Works on all platforms with modern browsers, no plug-ins needed.
For designers, implementing jQuery code may be a bit more difficult than integrating a Flash SWF.
HTML5 and CSS3
With increased browser support, the possibilities of motion design created with HTML5 and CSS3 is expanding rapidly. Motion can be created through the integration of HTML5’s canvas property and CSS3 keyframe rules. Many modern websites use a combination of HTML5, CSS3, jQuery and, in some cases, animated GIFs to create a dynamic experience.
Because of the heavy coding involved, it’s a bit more difficult for designers to produce. But programs such as Sencha Animator, Adobe Edge and Adobe Flash CS6 are starting to make HTML5 and CSS3 motion design more accessible to designers with basic coding skills.
Adobe created a Flash competitor called Adobe LiveMotion in 2000. Live Motion exported SWF files to play in Macromedia’s Flash plug-in. Adobe stopped producing LiveMotion in 2003 after version 2.0, but its timeline feature was reflected in Adobe After Effects’ award-winning interface. Adobe acquired Macomedia in April 2005, which included the programs Dreamweaver, Fireworks and Flash.