In the 90s and 00s, most interactive animations on websites were displayed using the Flash Player. It was a crazy time. Anything that flickered on the screen was considered good, and the Flash Player could execute programs on the target PC. The tool for creating these animations was offered by the company Macromedia and later by Adobe.
Today, web browsers can also display extensive animations using the JavaScript programming language. Numerous different frameworks and libraries simplify the creation of animations. PixiJS, SVG.js, and the now outdated CreateJS are examples. Methodically, the development of didactic animations is more demanding today.
But every technology has its advantages and disadvantages. PixiJS and SVG.js are two convincing approaches for displaying interactive 2D animations. PixiJS is (as the name already suggests) a pixel-based framework, while SVG.js is based on vector graphics. Based on experience, PixiJS offers better performance when displaying complex animations with many objects and rapid changes, as required, for example, in computer games. Didactic animations sometimes have similarly high demands.
CreateJS is a framework that has not received an update for many years. Although SVG.js appears to be the optimal medium for mathematical representations due to its vector-based approach, PixiJS was preferred because of its better performance. Razor-sharp images, which can be easily produced with SVG.js, are desirable, but smooth interactions are as well.
Unfortunately, all of the aforementioned frameworks have the disadvantage that there are no tools that allow them to be used without preparation. Adobe does provide a tool for creating CreateJS animations with Adobe Animate. But both Adobe Animate and CreateJS can now be considered outdated.
The editor available for use on this page is based on the PixiJS library. The results are visible immediately. No setup is required. An animation can be exported with a single mouse click. Although PixiJS serves as the basis for rendering the animations, a custom class model has been provided for creating the graphic objects.
This class model reflects the experience gained through years of working with Adobe Animate, ActionScript 2/3, and CreateJS. Anyone who wants to create a simple arrow, for example, already has a small task ahead that may take half an hour. It’s easy to end up building a small library of recurring snippets of code. The class model solves this problem and specifically addresses the requirements of didactic animations. This also includes the quick creation of UI elements (buttons, checkboxes, sliders, etc.).