Version 2 of the scrolling animation template

This is a working example of the new scrolling content. Similar to version 1, content moves in the diagram in response to the scrolling action of the reader and is timed to occur in sync with the text. 

No canvas element supported

Scrolling content template

An update of the scrolling template.

This is a square

It can move over...

and back.

Other things can change.

And the square can go away when it is no longer needed.

That transitions here are pretty straightforward, but they show that by combining moves, scales and color changes, this system can handle complex transitions. Each transition is coded with the text element it is linked to, how early (or late) it should start relative to the position of that text element, the duration of the transition and the specific value changes called for by the transition.

Since the changes are keyed to text position, it relatively easy to change the order and tweak the timing of individual transitions without needing to do too much code rewriting.

As with most transition systems, this one should work for any parameter that contains a numerical value. Aspects like width, opacity, and x and y position are transition-able. Things like Font family or style are not. Although, instantaneous changes in font style (e.g. from regular to bold) may be possible if the right settings are used, but I have not experimented with that.

The system does allow colors to transition by calling them as RBGA tetrads - Red, Green, Blue, and Alpha, with alpha being the opacity from 0 for invisible to 1 for fully visible. This adds some coding overhead because a single color change may require as many as 4 separate transitions to be called on it, but it works. Because the color transition system modifies each color channel separately, the intermediate colors that appear during a color transition depend on the range that each channel is moving through during the transition. This may result in some jarring intermediate colors if care is not taken. A possible way to avoid