Javascript Animations

Around 1998, Macromedia Dreamweaver allowed developers to create animated web pages using 100% generated JavaScript code. This was before we were told about the good parts of JavaScript, before script.aculo.us, and without the need for Flash players or Java applets of any kind.

Dreamweaver used a similar approach to Flash¹, in the sense that it offered a non-linear timeline, where you could define keyframes with specific properties (colors, positions on the screen, etc.) and Dreamweaver would generate the required JavaScript code (compatible with both Netscape and Internet Explorer) to create said animation.

The final animation was very, very, very similar to those generated by the above mentioned script.aculo.us, but sadly (and understandably, for commercial reasons) not reusable outside of Dreamweaver. This means… well, good luck understanding the generated JavaScript code. It was quite obfuscated (think webpack or similar) even if not completely minified, but in any case one could see a big if statement at the beginning:

if (IE) {
	// Internet Explorer code
}
else if (Netscape) {
	// Netscape code
}

Every page generated by Dreamweaver would contain its own generated code, which invariably represented a large amount of JavaScript to be downloaded inside of each page. Well, large, compared to the standards of that era, and to the relative speeds of 28k and 56k modems of the day. These days we wouldn’t even notice them. Think about the regular amounts of React and Angular code we have to download every day…

And the animations were simply flawless. A very clever use of setTimeout() and setInterval() to handle animations without blocking the single-threaded nature of JavaScript execution.

All of this happened seven years before Prototype, eight years before jQuery. Both projects demonstrated that encapsulating the if statement inside of a library and providing a common interface was the way to provide a true cross-platform experience to web developers. The rest is history.

Dreamweaver was in itself a joy of an editor, with unparalleled features (particularly when compared with that clunky competitor called FrontPage), but this animation editor certainly was the cherry on top of a fantastic cake.