Triggering Keyshape Animations on Pointer Enter

To trigger a Keyshape animation when the mouse is over it or when the pen or finger is touching it, follow these steps in Keyshape 1.12 or newer:

  1. Select the document object.
  2. Change Start Animation to On Pointer Enter. It is under the Interactivity section.
  3. Optionally, change Restart to Always to make the animation restart every time the pointer is moved over the animation.

The animation is ready for exporting! Export as a CSS or KeyshapeJS animation.

Embed on HTML pages with <object data="tickbox.svg" type="image/svg+xml"></object> or by copying the SVG code into HTML code. The <img> tag cannot be used because web browsers block interactivity in it for security reasons.

Document History

- Updated to use the built-in interactivity.

- Document created.