Inovista 
Click/Tap images to re-run.
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.

For developers, there is an easy to use API which can change just about any value in the animation. Using data driven values allows a user to create 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!

Developers can also use the Animator to build animations that allow just about any aspect of the animation to be edited or updated at runtime.
 
Animator Image

Animation Options

Movement Rotation Data Driven
Scaling Text Animation Wave Motions
Clipping Masking Text Offsets
Path Animation Morphing Event Driven
Outline Sketching Custom Components Deleoper 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.