All SnipSVG elements can be both animated and interactive. What does that mean? Let's have a closer look.
Animation
You can apply a wide range of animation effects to any element in your SnipSVG images. You can make them rotate, show and hide, move across the screen, grow and shrink and so on. These animations are always interactive. This means they can only be triggered by user actions, specifically a click or moving the mouse pointer over the element. You can't create images where everything starts animating as soon as the image is displayed, and that is by design.
Interactivity
Interactivity means that elements can respond to user actions: either a click or moving the mouse over the element. In SnipSVG animations are always interactive, because you need a click or mouseover to trigger them. In addition to this, all elements can also have links attached to them. These links are regular HTML hyperlinks, that do all the things that a hyperlink in a web page can do.
Animation interactivity
Any animation you apply to an element must be started by the user, either by clicking on it or by moving the mouse on it. These user actions can also trigger other animations on other objects. For example, you might create a switch icon that both changes color and displays an image when the user clicks it, like the example below.
The button changes color on mouseover, moves
and changes color and shows an image on click
Hyperlink interactivity
This is separate from animations, all elements can also have hyperlinks attached to them.
There are three kinds of hyperlinks:
•Web links: Link to a web page
•Email links: Send an email
•Script links: Execute some JavaScript
Show video and web content
Attach a link to a preview image or a regular element that then opens a video or web page in a "lightbox".
