Intelligent SVG Animation
Request Beta Testing or More Information

Inovista Animator

The  Inovista Animator is a intuitive tool that helps non-technical users to create amazing SVG animations. The animations may be purely decorative or they can be data driven. Using wizards, these animations can be exported as Tableau Extensions or Power BI Visuals. The animations can then be driven by data values in either Tableau or Power BI.

For developers, there is an easy to use API which can change just about any value in the animation.
For Webpages, Tableau and PowerBI, using data driven values allows a the creation of charts, indicators and Infographics which update when the data changes.

Using the Animator

The Animator is an SVG Editor that help non-technical users create animations with a huge range of capabilities. Open an SVG image or an existing product. Add or adjust animations to the whole image or parts of it. Create and save animation projects. Simple!

Animation Options

Movement Rotation Data Driven
Scaling Text Animation Wave Motions
Clipping Masking Text Offsets
Path Animation Morphing Event Driven
Create Tableau Extensions Create Power BI Visuals
Outline Sketching Custom Components Developer API

Path Animations

SVG paths can be embedded in the SVG image or imported as text. In the sample below, there are 2 hidden paths that the balls can follow. Like any other animation, the selected path can be changed at runtime. Use the dropdowns to change the path.
  

Group Animations

Animations can be grouped to produce  pleasing effects that reveal underlying data. Click on the images below to open an Infographic that consists of images generated by the Inovista Animator. These images all share the same data source.
Click to view
Animator Image
Animator Image

Morph Animations

Images can be morphed into another SVG image. The image to morph to can be hidden in the image or can be imported. Morphs can also be chained - an image can be continuously morphed into other images. Click the image below to re-run the animation.
Click to re-run

Clip and Mask

Clipping shows or hides part of an image whereas masking can be used to set a color for an image section. This can be used to create indicators such as bar charts based on the image.

The example below first makes the image visible using a clip and then uses a mask to plot a value of a selected color.
  

Waves and Curves

The image or parts of the image can be moved via a wave or curve motion. Options are available to set the number of waves and the height or amplitude of the wave.

The example below allows changing both the amplitude and number of waves. In this case, the whole image moves against the background.
  

Custom Images

Developers can create custom images using the d3 library and a template structure available with the Animator. These images can be based on just about any imaginable concept.

The example below makes use of a custom chart in addition to a standard clip type animation.

Tableau Extensions

Animations can be exported as a Tableau Extension using a wizard in the Animator.

The wizard accesses all the variables defined in the animated image and allows them to be assigned as either a data link or a property.
See the Tableau Extensions Help Page

A Bar Race chart that has been converted to a Tableau Extension. Click to view the inital animation.
Animator Image

Power BI Visuals

Animations can be exported as a Power BI Visual using a wizard in the Animator.

The wizard accesses all the variables defined in the animated image and allows them to be assigned as either a data link or a property.
See the Power BI Visuals Help Page

A Bubble Race chart that has been converted to a Power BI Visual. Click to view the inital animation.
Animator Image

Mouse Events

Animations can be started by mouse and touch events. There is also a toggle click option which gives an alternate animation for each click, switching between the animations.

Click the image below to open the curtains and then click again to close.