Triggering Keyshape Animations When Scrolled Into View

To trigger Keyshape animations when scrolled into view, follow these steps in Keyshape 1.12 or newer:

  1. Select the document object.
  2. Change Start Animation to On Scroll Into View. It is under the Interactivity section.
  3. Optionally, change Restart to Always to make the animation restart every time the animation is scrolled into view.

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.

Scroll down to see a live example.

This space is left blank intentionally to make the page scrollable.

Live Example

Below you can see a live example. The animation plays once when some part of it becomes visible.

Document History

- Updated to use the built-in interactivity.

- Document created.