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

Lesson 14. Animating with Timelines

Lesson 14. 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 simple animations to your Web page. You can have an object come in from the left of the browser and disappear off the right of the browser. The animation is controlled completely 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 your pages.

All objects that you want to include in an animation must be contained in layers. The layers are placed in a timeline that allows you to control the timing and movement of the layer. The timeline consists of a series of frames, much like frames in a movie. Each frame displays on the Web page at a 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.

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.

To see an example of the finished pages for this lesson, open moveit.htm and show.htm from the Lesson_14_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 File

Lesson_14_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