Simple interactivity can make animations more interesting. Interactivity has also other advantages.
Allowing users to decide when to play animations makes web pages less annoying. Mobile phone battery life will be longer when animations are not playing all the time. Some users may even feel motion sickness if there’s lots of action on the page. So, it’s a good idea to let users choose when to play animations.
Keyshape 1.12 supports triggering an SVG animation on click, when a pointer is moved over it or when it’s scrolled into view. Below is an interactive example created in Keyshape.
Keyshape can export SVG with CSS or KeyshapeJS animations. They both support interactivity. CSS animations are controlled with the Web Animations API, which is supported by all modern web browsers (the latest Safari, Edge, Chrome and Firefox). For a bit older browsers, KeyshapeJS can be used. The browser compatibility table shows how web browsers support various interaction features.
Read more about interactivity in the help documentation and see the examples on the support page. Also, check out the release notes for details about all changes and fixes in Keyshape 1.12.