• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Lesson 16. Animating with Timelines

Lesson 16. Animating with Timelines

HTML pages are generally motionless unless you add an animated GIF or a Macromedia Flash movie. You can roll over a button that might appear to move slightly as it swaps out with another image, but it remains static on the page. With Dynamic HTML (DHTML), you can add more extensive animations to your Web page. These animations are controlled with JavaScript within the HTML page, without the need of a plug-in. The limitation on DHTML animations is that users must use a 4.0 or later browser to view the pages.

In this project, you will create an animation by placing multiple layers in a timeline, and you will use keyframes to control visibility and create movement.

All objects that you want to include in an animation must be contained in layers. The layers are placed in a timeline, which allows you to create a path of movement and control timing. The timeline consists of a series of frames, much like frames in a movie. Each frame displays on the Web page at a specific point in time, depending on how many frames per second you specify and how long the animation is. You can control the placement and properties of each layer in a frame. A frame can also trigger a behavior during the animation.

To see an example of the finished pages for this lesson, open ship.html and navigate.html from the Lesson_16_Timelines/Completed folder.


In this lesson, you will:

  • Add layers to the timeline

  • Make layers move around the page

  • Alter the timeline with keyframes

  • Change the speed and duration of the animation

  • Record the path of a layer as you move it

  • Control when the animation starts

  • Change the visibility of layers during the animation

  • Add behaviors to the timeline

  • Make it possible for the viewer to start the animation


This lesson should take about two hours to complete.


Media Files:

Lesson_16_Timelines/Images/…(all files)

Completed Project:





Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint