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:

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:

Text Objects

Text objects have a property to control text selection:

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.