If you point to an element, the information for that element appears.

• In the lower left corner is a magnification of each square in the table itself. This allows the table window to be small and still readable.
• On the left side are valence numbers for the number of electrons in the outer shell of reactive elements. I used a classic valence diagram for this, but it becomes animated as you mouse over different elements in a way that show how electron shells fill from left to right across the table.
• Above the table, every reactive element also has a 3D electron cloud diagram and corresponding description of its orbital configuration.
• In the upper left corner is a mode menu that indicates where in the periodic table an element is categorized in terms of group, period, block and type.
• If you point to any item in the mode menu, you'll see an animated description of what group, period, block and type mean.

When you click an element, you zoom in on the details of that element. The important thing here is how I have used animation to transition from the detail view to the table view. Rather than have the detail view pop up suddenly, I created what I like to call an informative transition.

• The magnified element square in the lower left slides up to indicate that this is now the active element.
• Rather than vanish, the entire table retracts back into the upper left corner, and the menu explodes to encompass the table.
• The Group menu item assumes the same orientation as the labels for groups: horizontally across the top of the table.
• The Period menu item orients itself vertically because periods run vertically down the left side.
• Look closely at what the title text does. It relocates to where it is appropriate in the detail view. The word Element leaps off the menu, and scoots to the right to take up a new position as the main heading. The the original table title snaps in half and slides to the left along with the table.

There is an intentional coherence to the movement here as well. Zooming in to a detail view involves the element in question moving up and left, while its context moves up and to the right. Nothing ever appears or disappears - things just change position and scale just fast enough that you can track them, but not so slow that they are annoying.

Next, click on the element hydrogen. This is my concept for a detail view in this context. The detail view also contains a number of experiments with animated transitions.

• In the Astronomical section, click the sun. It will enlarge in an animated transition, and open to reveal information about how elements are made inside stars. Inside this little tangent are two buttons: one to zoom back to where you came from, and one to learn more. If you want to learn more about stellar fusion, this would be a hopping-off point with another pop-up animated object dealing with that subject.
• In the Astronomical section, click the spectrum. Like the sun, it explains where spectral lines come from.
• In the Biological section, you can click the microscope slides to look more closely at various tissues - all of which where carefully scaled so that their relative sizes were accurate.
• In the Biological section, if you click the food, you'll see a little description of biomolecules.
• In the Biological section, of you click the hazard symbols, it will transition to a hazard chart.

That is probably enough to illustrate my point. That diagrams can themselves contain other diagrams, which can contain still more levels of detail that encourage exploration. The learner is awarded for being curious. But notice that even when you have drilled down several levels, you have never lost your way. At every step, it is always intuitively obvious how to get back to another section or level.

Pointing to a section provides a preview, and clicking a section invokes an informative transition to a detail view.

• The main menu shrinks into the upper-right corner, formed from a fusion of the other sections.
• The section slides to the left, and subsections pop out. Again, pointing to a section tells you more about what it does, clicking transitions to a detail view.
• The Project Photos section was an experiment with showing before, during and after photos of the project site from specific vantage points.
• The Project Map section also makes heavy use of animated transitions. The map itself has multiple controls for changing the transparency of map layers, with the top-most layer on the top of the menu.
• Across the top of the Project Map section are four buttons, the first of which is the Plant Zone Explorer that allows you to place a thumbtack anywhere in the map to view a list of the plants that grow there. Clicking a plant in the list displays a picture of that plant. Clicking the name of a plant opens a new window with botanical details on an external site.
• The Biology section links to useful external sites.
• The Chemistry Labs section shows the various tests students perform, and how to perform them. As an example, click Alkalinity, and use the Next arrow button below the photo to step through exactly how the test is done.
• The Chemistry Graphs section is where the results of student tests over the development of the wetland - before the wetland was created (prior to March, 2002), and after the wetland was created (after October 2002).
• The Ecology section contains some experiments with animated presentations on the Hydrologic cycle (described at the top of this page), Energy cycle and Carbon cycle.
  I didn't get a chance to finish the last two animations here.
• The History section has an interactive time line and map showing development.