Demo animations using HTML+TIME

These all require IE 5.5 (or later)  to see anything happen. Get the browser here

In case you were wondering...

There is no script on this page. Everything you see is done declaratively.

SMIL 2.0 Timing, Time manipulations and Animation produce the effects.

Animated Filters are used for transitions, until SMIL 2.0 Transitions are implemented.

Pretty cool, isn't it?

Orbit demo. This is a nice mechanical animation that uses no script (not even for button controls). It shows a stylized planetary system (no attempt to be to scale or use correct cosmological timing). The animation is built up with three simple animations for each planet - x-motion, y-motion and a scale on the image. The animations for the different planets differ in the extents of the motion and scale, and then apply a speed to make them run faster or slower than the reference orbit for the earth.
Buttons allow the viewer to control the speed of the animation, restart the animation, and control the volume of the associated sound.
Bounce-animation version 1. Simple version of a bouncing ball. This is a fairly simple animation based entirely upon the declarative syntax for SMIL Timing and Synchronization and SMIL Animation. It was easily hand-authored with no need for script.
Bounce-animation version 2. This is essentially the same animation, but shows that script can be integrated with the SMIL language, when an author wishes to do so. The key here is that the script is not performing any of the difficult work of the timing or animation engines, but rather is just changing the animation itself over time. Any language has limits, and script can be used to describe applications beyond the limits of the declarative language. The script used in this animation is equivalent to the kind of button-click handlers that  authors with script experience often use.
Bounce-animation version 3. This builds upon the previous animation, adding synchronized sound effects and a nice squish on the earth when it hits the ground.
 Bounce-animation version 4. This is pretty much the same the previous example, except that it shows how to make it adapt to different screen sizes. Try making the browser window wider or narrower while it is running to see the effect.
Control-Panel demo 1. This animation builds upon the no-script version of the animation, and demonstrates the power of a purely declarative animation: it can be paused, run forwards and backwards, and even supports jumping around within the animation. Click on the Play button to make it begin, and then you can pause, resume, skip forward and backward, and even drag the slider around.
The control panel is implemented as a ViewLink (an encapsulated, reusable extension behavior).
 Control-Panel demo 2. Another variant on the control panel, with a slightly different animation.