Animation for the Web

I.     Course Prefix/Number: ART 273

       Course Name: Animation for the Web

       Credits: 3 (0 lecture; 6 lab)

II.    Prerequisite

ART 259

III.   Course (Catalog) Description

Course examines animation techniques for the web by combining graphic animation tools and techniques with accepted principles of web design, layout and typography. Content includes interaction design and animation to create web sites with enhanced interactivity and multimedia integration.

IV.   Learning Objectives

  1. Translate movement of objects in space to the computer using graphic software.
  2. Explain the programming principles used to produce highly interactive web page elements, such as CSS transitions and animation and triggering animations with JavaScript.
  3. Explain bandwidth limitations of the web when planning, organizing and constructing interactive web pages.
  4. Establish a coordinated plan to create interactive web pages.
  5. Demonstrate interaction design principles by designing for specific users and behaviors.
  6. Use sophisticated graphics applications to incorporate interactivity and animation into web pages.
  7. Organize, deploy, troubleshoot and maintain a set of sophisticated, highly interactive web pages.

V.    Academic Integrity and Student Conduct

Students and employees at Oakton Community College are required to demonstrate academic integrity and follow Oakton's Code of Academic Conduct. This code prohibits:

• cheating,
• plagiarism (turning in work not written by you, or lacking proper citation),
• falsification and fabrication (lying or distorting the truth),
• helping others to cheat,
• unauthorized changes on official documents,
• pretending to be someone else or having someone else pretend to be you,
• making or accepting bribes, special favors, or threats, and
• any other behavior that violates academic integrity.

There are serious consequences to violations of the academic integrity policy. Oakton's policies and procedures provide students a fair hearing if a complaint is made against you. If you are found to have violated the policy, the minimum penalty is failure on the assignment and, a disciplinary record will be established and kept on file in the office of the Vice President for Student Affairs for a period of 3 years.

Please review the Code of Academic Conduct and the Code of Student Conduct, both located online at

VI.   Sequence of Topics

  1. Basics of motion and motion design
    1. History of animation
    2. Creating a flip book
    3. What is motion?
    4. Listening to the motions around you
    5. Birds and bouncing balls
    6. Time and sequence
  2. Web object fundamentals
    1. HTML 5 Elements and Animation
    2. CSS Principles and Properties
    3. JavaScript Fundamentals and the jQuery Library
    4. Animation and color theory
    5. Creating text for animation
    6. Using layers to create animation
    7. Creating image effects
  3. Web animation topics
    1. Site design principles
    2. Usability issues
    3. File size, pre-loaders and streaming
    4. Smart clips and reusability
    5. Basic principles of 3D
    6. Character animation
    7. Using video
    8. Masks
  4. Animation/web page integration
    1. Using extensions
    2. Tables and layers for animated content
    3. Animation file placement
    4. Text creation and formatting
    5. Buttons and flash text
    6. Defining a site
    7. Previewing
    8. Background colors with software
    9. Behaviors, objects and commands

VII.  Methods of Instruction

This course will be taught using a combination of lecture, demonstration, presentation and hands-on studio time in the lab.
Course may be taught as face-to-face, hybrid or online course.

VIII. Course Practices Required

  1. Attend and participate in classes and lab sessions
  2. Attend scheduled critiques presenting completed work
  3. Complete assigned artwork by scheduled due dates
  4. Quizzes and final exam
  5. Demonstrate a professional attitude

IX.   Instructional Materials

Note: Current textbook information for each course and section is available on Oakton's Schedule of Classes.

  1. Flash drive or portable hard drive
  2. Ink-jet paper

X.    Methods of Evaluating Student Progress

The final grade will be based upon the following elements and their weights:

A. Class attendance and participation: 20%
B. Quizzes: 20%
C. Mini projects/critiques/homework assignments: 20%
D. Final Exam: 20%
E. Final Project: 20%

There will be three quizzes, spaced throughout the semester. There will be three mini projects covering issues such as motion design principles, animated navigation systems, and advanced animation. The final project will simulate a well-organized highly interactive web site. The final exam, an objective test, will be administered on the last day of class.

XI.   Other Course Information

Please note:
Some of the activities, lectures and assignments in this class may include imagery that is controversial, uncomfortable, shocking, has nudity, and personally unpopular to one's beliefs. If a student objects to this practice, he/she is encouraged to discuss with the instructor early in the semester alternative ways of completing course requirements.

Open lab times will be announced at the beginning of each semester.

If you have a documented learning, psychological, or physical disability you may be entitled to reasonable academic accommodations or services. To request accommodations or services, contact the Access and Disability Resource Center at the Des Plaines or Skokie campus. All students are expected to fulfill essential course requirements. The College will not waive any essential skill or requirement of a course or degree program.

Oakton Community College is committed to maintaining a campus environment emphasizing the dignity and worth of all members of the community, and complies with all federal and state Title IX requirements.

Resources and support for
  • pregnancy-related and parenting accommodations; and
  • victims of sexual misconduct
can be found at

Resources and support for LGBTQ+ students can be found at

Electronic video and/or audio recording is not permitted during class unless the student obtains written permission from the instructor. In cases where recordings are allowed, such content is restricted to personal use only. Any distribution of such recordings is strictly prohibited. Personal use is defined as use by an individual student for the purpose of studying or completing course assignments.

For students who have been approved for audio and/or video recording of lectures and other classroom activities as a reasonable accommodation by Oakton’s Access Disabilities Resource Center (ADRC), applicable federal law requires instructors to permit those recordings. Such recordings are also limited to personal use. Any distribution of such recordings is strictly prohibited.

Violation of this policy will result in disciplinary action through the Code of Student Conduct.