Interactivity

Interactivity makes animations more engaging. Keyshape supports starting animations on click, on pointer events or when the animation is scrolled into view.

Note: It is not possible to control the animation of individual objects or symbols.

Interactivity can be used in SVG with CSS or KeyshapeJS animations. Other file formats, such as PNG images or video formats, do not support interactivity.

Note: When you add interactive SVG code to a HTML page, you should use the <object> tag or inline the SVG code. The <img> tag cannot be used for interactive content.

Interactive animations cannot be tested on Keyshape by pressing the play button. To test them, preview them in web browsers.

Interaction Properties

The properties for interactivity are shown in the Property Panel. The document object, text objects and group objects have different options.

The Document Object

Below are the interactivity properties for the document object.

The Cursor property defines the shape of the mouse cursor when it is hovering over the document.

The Start Animation property is used to set the events starting the animation. Any combination of events can be used. The options are:

  • On Load - the animation starts playing immediately after the animation is loaded and shown on the web page.
  • On Click - the animation start playing when the user clicks or taps it.
  • On Pointer Enter - the animation starts playing when the mouse pointer enters or if the user touches it on a mobile device.
  • On Scroll Into View - the animation starts playing when it is scrolled into view.

The Restart option defines what happens when the event happens again. For instance, if the user clicks the animation again or if it is scrolled into view again. The possible values are:

  • Never - the animation never restarts. It plays only once for the first event. Subsequent events are ignored.
  • Always - the animation restarts every time the event happens.
  • When Finished - the animation restarts if the animation has finished and the event happens again. The animation is not restarted if it is still playing.

Text Objects

Text objects have a property to control text selection:

  • Allow text selection - When checked, texts can be selected and copied to the system clipboard. When unchecked, texts can't be selected.

Group objects

Group objects have properties to create hyperlinks.

Hyperlinking

Hyperlinks are links to other web pages. In Keyshape, group objects can become hyperlinks.

To create hyperlinks:

  1. Select a group object.
  2. Select Enable hyperlink in the Property Panel's Interactivity section.
  3. Enter the destination web address in the URL field.
  4. Optionally, set the Target field to indicate how to open the new web page.

Document Scripts

Document Scripts are global scripts, which are run when the document is loaded. The main script can be used to initialize variables or to set custom event listeners.

Select View > Show Document Scripts to edit the scripts.