History of Animation | Computer Animation | Animation as a Web Design Trend | Animated GIFs

Television programs, movies, and videotapes with animation are part of our daily lives. Animation plays a huge role in entertainment (providing action and realism) and in education (providing visualization and demonstration). Entertainment titles in general and children’s titles in particular rely heavily on animation. But animation can also be extremely effective in other titles, such as training applications. Web trends show that animation is common place and expected in many instances. Try to think of a Web site that does not at least use an animated icon.

History of Animation

Steamboat Willie

Steamboat Willie is a 1928 American animated short film directed by Walt Disney and Ub Iwerks. It was produced in black-and-white by Walt Disney Studios and was released by Celebrity Productions. The film is also notable for being the first cartoon with synchronized sound.

Walt Disney’s 1937 production, Snow White and the Seven Dwarfs, broke new ground on a number of fronts.

It was:

  1. the first cel-animated feature film ever produced;
  2. the first animated film made in color – technicolor actually; and
  3. Disney’s first animated film, one of many commercial and artistic hits to come.

Two years later, Disney produced an in-house documentary, How Walt Disney Cartoons Are Made, that walks you through the stages of Snow White‘s development – the writing of the first story lines, the drafting of the animation sequences, the hand painting of 250,000 celluloid frames (done by “pretty girls,” as they say) and beyond. Back in the day, American filmgoers watched this footage in the cinema, the trailer before the main feature film.

Meanwhile, you can also watch online Paramount’s 1939 answer to Disney’s big hit – Gulliver’s Travels, another cel-animated Technicolor feature film directed by Dave Fleischer, who later brought us an animated version of Superman (1941).

animation quote

Computer Animation

Cars and Cars 2 are both computer generated animation

As early as the 1940s and 50s, experiments in computer graphics were beginning, most notably by John Whitney—but it was only by the early 1960s when digital computers had become widely established, that new avenues for innovative computer graphics blossomed. Initially, uses were mainly for scientific, engineering and other research purposes, but artistic experimentation began to make its appearance by mid-1960s. By the mid-70s, many such efforts were beginning to enter into public media. Much computer graphics at this time involved 2-dimensional imagery, though increasingly, as computer power improved, efforts to achieve 3-dimensional realism become the emphasis. By the late 1980s, photo-realistic 3D was beginning to appear in cinema movies, and by mid-90s had developed to the point where 3D animation could be used for entire feature film production.

Animation is the use of graphics or text with added motion. Animation is used to draw a visitor's attention to an important concept, but is should be limited in use as too much movement can distract a user's attention from the content of the website.

Animation is an illusion! Yes, it is true. Animation is created by tricking your eyes into believing that something is moving. The perception of motion in an animation is an illusion. The movement that we see is made up of many still images, each in its own frame, which is like a movie. (Movies on film run at 24 frames per second, whereas television uses 30 frames per second. Computer animations can be effective at 12 to 15 frames per second; anything less than 12 frames per second, however, creates a jerky motion as the eye detects the changes from one frame to the next.

While 2-D animation can be effective in enhancing a multimedia title, 3-D animation takes the entire multimedia experience to another level. 3-D animation is the foundation of many multimedia CD games and adventure titles.

animation quote

Assignment: Question for Thought 1

Directions: Describe how computer generated animation differs from other types of animation (~100 words). Post your essay directly to the itsLearning textbox. Do not submit a separate document and be sure to proofread before submitting.

Animation as a Web Design Trend

Changing technologies have made animations smoother and lighter on the web, thus increasing their popularity as a website design trend. Beautiful website templates that use can incorporate JS animation, parallax and CSS3 animation effects to bring you cool transitions, animated backgrounds, content, text, graphics, icons, navigation links, pages that fold and tilt, images that flip, bounce, twirl, part reveal, or work with draggable scroll to give your website visitors visual delight and interactivity!

The benefits of animation in our websites include:

The downside of using animation in our websites include:

JS animation makes a range of movements possible while keeping the website lightweight, unlike Flash. Parallax scrolling using JavaScript and CSS techniques, creates an effect of 3-D depth with foreground images moving faster than background images. Scroll-activated animation and lazy animations of web elements attract the user but do not detract from the main content.

Although there are several creative examples of web designs using animation, designers should think long and hard before using animation for its own sake. Too many animations on a page can make it slow-loading and turn off a site visitor. Animation can be distracting from the main content and navigation. Another thing is that all browsers do not fully support all animations. However, movement and action is part of the dynamic nature of the web, which is why animation is only going to get better as web developers and designers learn to use it more effectively. Entheos Web Blog

As you create and use animations in your websites, you should be aware of mobile device issues associated with animation and plug-ins:

Assignment: Question for Thought 2

Directions: Describe how animation can be used to enhance a Website (~100 words). Cite one example of a Website that uses good animation and include the URL. Post your essay directly to the itsLearning textbox. Do not submit a separate document and be sure to proofread before submitting.

Animated GIFsanimated kiss

Animated GIFs (pronounced "gif or jiff") have become huge. They’re everywhere! You might even be tempted to think that the animated GIF has taken over the World Wide Web. Perhaps not, but they are usually eye catching and enhance a Website with interactivity. The original GIF file, GIF87, was a static graphic file. It wasn't until 1989 that animation was added.

Basic animation was added to the GIF89a spec via the Graphics Control Extension (GCE), which allows various images (frames) in the file to be painted with time delays. An animated GIF file comprises a number of frames that are displayed in succession, each introduced by its own GCE, which gives the time delay to wait after the frame is drawn. Global information at the start of the file applies by default to all frames. The data is stream-oriented, so the file-offset of the start of each GCE depends on the length of preceding data. Within each frame the LZW-coded image data is arranged in sub-blocks of up to 255 bytes; the size of each sub-block is declared by the byte that precedes it.

By default, however, an animation displays the sequence of frames only once, stopping when the last frame is displayed. Since GIF is designed to allow users to define new blocks, Netscape in the 1990s used the Application Extension block (intended to allow vendors to add application-specific information to the GIF file) to implement the Netscape Application Block (NAB). This block, placed immediately before all the animation frames, specifies the number of times the sequence of frames should be played. (The value 0 signifies continuous display.) Support for these repeating animations first appeared in Netscape Navigator version 2.0, and then spread to other browsers. Most browsers now recognize and support NAB, though it is not strictly part of the GIF89a specification.

Internet Explorer slows down GIFs if the frame-rate is 20 frames per second or higher and Microsoft reports that Google Chrome and Safari also slow down some GIF animations. Wikipedia

Read the blog post Why Animated GIFs Belong in Your Content Marketing Mix by Andrew J. Coate at Kapost to see why animation is important to Websites and social media.


Cinemagraph is a technique of blending the effects of images and videos. It was introduced by a New York fashion photographer Jamie Beck, in collaboration with motion graphics designer Kevin Burg. Cinemagraphics is a sophisticated and refined version of creating animated GIF’s. It has very subtle animation

Copyright Charlie B. Johnson

To learn more about cinemagraphs, read Joseph C. Lin's February 2014 article, When Photos Come to Life: The Art of the Cinemagraph. The article is an interview with cinemagraph creators Beck and Burg and shows more examples of cinemagraphs.

Assignment: Create Your Own Animated GIF

Directions: allows you to create animated GIF images online freely and easily and does not require registration. Visit and follow the instructions on the Website to create your own animated gif. When finished, upload your animated GIF to itsLearning.


If you are having problems viewing this page, opening videos, or accessing the URLs, the direct links are posted below. All assignments are submitted in itsLearning. If you have having problems, contact Mrs. Rush through the itsLearning email client.

Steamboat Willie video:

How Walt Disney Cartoons are made video:

Cars 2 - Trailer 2 video:

Why Animated GIFs Belong in Your Content Marketing Mix:



Computer animation history: Wikipedia

Transcript of this lesson