WebAnimator is a desktop application for Windows and macOS that creates HTML5 animations and interactive web content. It combines a visual canvas with scenes and timelines for building banners, animated page elements and presentations. You can construct animations without writing code, then add JavaScript when a project needs custom behavior.
Scenes and timelines
A WebAnimator project divides its content into scenes, much like a presentation divides material into slides. You place objects on the canvas and organize the scenes to control the order of the content. Within a scene, multiple timelines let you manage different animation sequences and control their playback.
Keyframes mark changes along a timeline. They can be added manually, or generated through Auto-Keyframe, including within a selected range. Preset effects supply ready-made animations, while a sequence you have built with keyframes can be saved as a custom effect for another project.
Vector motion
WebAnimator includes predefined shapes and lets you import or draw vector artwork. Freeform editing works through anchor points: you can add or remove points and change their types to adjust a shape’s outline. Morph animation then changes one shape form into another over time.
Movement can follow a curved motion path instead of a straight route. Anchor and control points define the trajectory, while orientation settings determine how the moving element faces along it. Timing remains on the timeline, and easing controls how the transition’s speed develops.
For a drawing effect, a Line Length keyframe animates the visible length of a line. It can make an illustration appear to be drawn progressively, as in a whiteboard animation.
Text, sprite sheets and symbols
Text animation can operate on individual letters or whole words. WebAnimator supports system fonts and Google Fonts, with an option to embed system fonts in the HTML5 output to preserve their appearance when the content is viewed elsewhere.
Sprite sheets provide another way to animate artwork. A sequence of graphics is arranged inside a single bitmap image, from which WebAnimator creates one or more animation sequences. This suits character animation built from separate poses while keeping the sequence’s graphics in one loaded file.
Symbols let identical elements, scenes, timelines and animations be shared across a project. A single element can also remain present across multiple scenes, with a different animation assigned in each.
Interactive behavior
An animation can respond to the viewer through actions and triggers associated with events such as a mouse click or a key press. Combined with timeline playback controls, these responses let a composition change according to input instead of simply running from beginning to end.
For behavior beyond the visual controls, WebAnimator has a JavaScript editor for writing functions. You can also create custom HTML elements and import external HTML, CSS and JavaScript resources from files or URLs. Those resources remain editable inside the application, connecting the visual composition with code used by the surrounding web content.
Publishing WebAnimator projects
Responsive projects adapt to the browser’s dimensions. WebAnimator also permits a nonresponsive project to be converted to a responsive one, so layout behavior can be changed after the initial composition has been created.
You can preview a scene on its own or run the entire project before exporting. HTML5 export produces the web animation and its interactive content; projects can also be exported to video for demonstrations. WebSite X5 integration provides a route for placing the exported animation in a web page built with that application.
