Animator Introduction

The Inovista Animator is a intuitive tool that helps non-technical users to create amazing SVG animations. The animations may be purely decorative or consist of charts and infographics.

Useful Links

The Animator

Transition Types
The complete image or any of the elements within it can be animated with transitions. Transitions may be individual or in a chained sequence. A full range of transitions are available to the user:
The following images are examples that make use of a range of transitions. Click on the image to view the animation.

Spinning Wheel of Fortune
Text Animation

Simultaneous Background & Inner  Animations

The following are examples of Animator generated images of many different types combined  to present information as animated Infographics. Click on the image to view the animation. (Note that these images are plotted as data series in a single Inovista Chart)

Health Comparison
Champions League

World Cities

Full Image and Inner Segment Animations
Animations can be applied to the whole image or elements within the image or both simultaneously. Using a full image animation means the image can move to any point on the web page. At the same time, animations can take place within the image. The Earth Rotation animation provides an example of the parallel motions.

Different Animations for Different Events
Animations may be triggered by a specific event, for example a mouse click or a tap on a mobile phone. Other events include mouse out and mouse over. There is also a 'Toggle Click' option. A 'Toggle Click' offers the capability to set one animation for the first click and and then another for the second click. This behavior is repeated and can be useful in cases where the second click resets the image to its original setting. The 'Text Animation' example above shows samples of event driven animations. For more information, see Action Events.

Custom Image Animations
In order to present basic charting capabilities, a number of Custom Images are available with the Animator. These images are SVG files with embedded code. Developers can also create their own custom images. The images currently available are: For more information, see Custom Images.

The following are examples of Custom Images imported into the Animator. Click on the image to view the animation.

Radial Chart
Bar Chart

Area/Spark Line Chart

Variable Parameters and the Animator API for Developers
Most options in the Animator allow the option of entering a variable name rather than a value. By using a variable, different behaviors can be set at runtime in conjunction with the Animator API. The API allows changes to those variable values using JavaScript functions. These calls can radically change the image animations. See Variables and the Animator API.