Triggering Keyshape Animations When Scrolled Into View
To trigger Keyshape animations when scrolled into view, follow these steps in Keyshape 1.12 or newer:
- Select the document object.
- Change Start Animation to On Scroll Into View. It is under the Interactivity section.
- 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.
Below you can see a live example. The animation plays once when some part of it becomes visible.
- Updated to use the built-in interactivity.
- Document created.