Module 9: Interactive Animation

Introduction: Animation and Interactivity

Educators—like us, in schools and government and business organizations—look to multimedia to make content interesting and to help learners comprehend.

Computer animation can aid learning in many content areas, including math, science, art, and foreign languages. Computer animation is useful when folks neeed to see concepts or perform actions that can be difficult to see or do in real life. In this tutorial, we will discuss interactive animation, look at some different types of interactive animation, value some of the advantages of interactivity, and try out the Cognitive Interaction Model.


By the end of this module, you will be able to:

 First, let's review what we mean by "animation" and "interactivity."


What is animation?

We ordinarily associate “animation” with TV or movie cartoons. The word actually means to breathe the life into something. Cartoon animation involves the illusion of a moving image created by the consecutive display of series of static images. While there are different types of animation (for example, cell animation, claymation, and stop-motion), our focus in this module is computer (digital) animation. Computer animation works pretty much like cartoons or the other types of animations, by "flashing" a series of still images rapidly to create the illusion of motion. You'll find computer animation in computer games, educational programs, movies, and elsewhere.

What is interactivity?

This is a little more difficult, as people define interactivity in many different ways.

This tutorial focuses on human-computer interactions. We can think of “interactivity” as a dialog between user and computer. The user manipulates an input device such as a mouse or keyboard, which activates a computer application. The computer application responds to that action in the form of visual and/or aural output. In interactive learning environments, learners actively participate in learning tasks and receive immediate response or feedback. Appropriately designed, this can lead to greater interest, motivation, and accomplishment of learning outcomes (Sims, 1999).

What are the differences between regular and interactive animation?

Computer animation may be categorized as regular (continuous) animations and interactive animations. The differences between regular animation and interactive animations are:

Comparison of regular and interactive animation
Regular Animation Interactive Animation
Does not allow users to pause, stop, or rewind. User can start, pause, stop, or rewind.
Does not allow users to participate. Users watch the same scenario continuously. Users actively engage in the animation. They can select, move, or drag an object by using keyboard or mouse.
Does not provide feedback. Provides immediate feedback.

Examples of regular animation:

Examples of interactive animation:

Why use interactivity?

In regular animation, users view but don't control the animation. Adding interactivity to this type of animation may help engage learners and enhance learning (

Jones and Scaife (2002) compare static and animated diagrams to demonstrate dynamic processes and their influence on cognitive interactions. They concluded that animated diagrams are more effective than static ones because learners show greater confidence and attention while working with animations. Nevertheless, learners did not respond clearly and completely to specific questions about the animations. The learners reported that animations were too fast, too complex, and lack user control. The researchers suggest that when animation presents complex information, let learners control the pace, repetition, and feedback.

Students often have difficulty understanding complex scenarios presented with video or still diagrams. Video can sometimes be more expensive to shoot or require large amounts of storage. In some cases, interactive animation can be used to present complex ideas more economically and with greater effectiveness. For instance, learners with little experience of hip surgery may have difficulty understanding it by reading a book or watching a video. However, interactive animation may help them grasp the basics:

What are the advantages of interactive animations in education?

Why is the cognitive process important in interactivity?

Probably the most important thing to remember about interactivity is that it is cognitive interaction that results in improved learning. To the extent that physical interaction (clicking, dragging, and the like) fosters cognitive activity (remembering, selecting, organizing, and integrating), it may enhance learning.

Think of interactivity as the interaction between inside (cognitive structures) and outside (physical, interface) representations.

Here is an example of an interactive animation designed to stimulate cognitive interactivity: (This is part of an experiment with 8 different treatments (versions) involving varying degrees of interactivity and feedback. The version you see here is the "full" version with all the interactivity and feedback.)

Here are two more examples:

Designing an interactive animation

Interactive Animation Examples

An excellent way to learn about interactive animation and its types is to examine some examples. First, look at some of these examples:

Knee surgery: 

Room planner: 

Simple machines:


3D Catapult Designer:

Pheromones trails: 

Math tutor:   

Geology: Face your spheres: 


United States history: 


3D Topographic maps: 


Anatomy of a Rover:


Animal and plant cell:
There are plenty of flash projects:

Now, find some interactive animation examples that might be helpful as you design your own article for the Encyclopedia of Educational Technology. When you are searching interactive animation examples, you have an opportunity to practice the "cognitive interaction." Ask yourself these questions as you explore an interactive animation:

Here are some search terms when you are using search engines for the examples of interactive animations on the Internet:

As you looking for good examples, notice some examples of poorly designed interactive animations and figure out why you think they are less effective?

Designing an interactive animation

Let’s get started constructing an interactive animation. In this section, we will give you some hints that will be useful when you are planning your project. Consider the factors described below:

Reflect: WHEW!

You've really accomplished a lot since beginning this course! You've participated in a team project to create a video program from scratch, and by now you've probably also tackled at least one of the multimedia tools you've selected to learn.

Shortly we'll begin another project, this one to build an educational multimedia web page. So this might be a good time, when the editing on your video is completed, to sit back with your Jonassen book and peruse some of the articles.

Don't forget to write about what you read for the course list serv .

More on interactivity

Some additional resources that may interest you:


Page updated June 12, 2012