The Open Animation Lab is an online programming tool (open source) for creating educational animations.
The finished animations can be exported as HTML files and then embedded on any website or used locally.
There are many pre-built classes. For example, if you want to create GUI elements, all it takes is a few lines of code.
Don’t be discouraged by the fact that it’s a code-based tool without drawing capabilities. You can easily import images as SVG files (or optionally as PNG files).
The tool uses two different open-source renderers to display animations. SVG.js is the default engine. Its advantage is razor-sharp rendering. PixiJS can be used for animations that require high computational performance (e.g., interactive real-time animations). The rendering is also high-resolution, but depending on the display size (e.g., 4K monitors), it may not always be perfectly crisp.
Getting Started
After starting the application, you will see the following view:
On the left side, you’ll find various templates. These templates allow you to quickly explore what’s possible with this software. There is a template for every object. With small experiments, you’ll quickly get the hang of it. If you prefer a systematic introduction, there’s also a software reference.
After opening a template, it looks like this:
The right area displays the animation content. On the left, you see the code that generates the animation.
At the top left, you can see the name of the current tab.
You can open as many tabs as you like—for example, to open more templates or create small drafts.
In the upper right toolbar, you’ll find options to open and save files. Here you can also export animations as HTML files.
In the lower left corner, you’ll find buttons you’ll use frequently. After changing the code, you can refresh the animation here. You can also search for strings and display messages.
To generate a message, enter the following code in the editor:
console.log("Hello World");Note: These messages are stored in your device’s RAM. If there are many messages (e.g., repeated outputs), the animation may noticeably slow down.
Last but not least, in the lower right corner, you’ll find two buttons to take a screenshot and switch to full-screen mode.
The Code Editor
When you look at some of the available templates, you’ll sometimes notice an info icon at the edge of a line.
These icons appear when a class is already predefined. When you click on the icon, a form is displayed.
The form contains all the information about the object. You can also modify the initialization parameters here. The form therefore serves both as a reference and a quick editing option.
Embed Animation on Your Website
You can embed an exported animation on your website using the following code, for example:
Final Remarks
You will find at least one template for every predefined class. This allows you to learn the tool in a playful way. A complete overview of all classes can be found at the following link:
If you would like to host the editor on your school’s website, you can download it from the following link: