JavaScript animations

Export SVG animations powered by JavaScript

SVG animations exported using the JavaScript format are ideal to use when you have complex animations that require advanced interactivity options. This type of animation is small in size, widely supported across browsers, and very efficient to run.

./export-js.jpg

Export JavaScript-based SVG animation

./export-js.jpg

Interactivity settings

The following interactivity settings are available:

Start animation

Tell when to start the animation. The available options are:

  • On composition visible - Start the animation when the composition is visible on the page.
  • On page load - Start the animation when the page loads.
  • On mouse click - Start the animation at click.
  • On mouse over - Start the animation when the mouse cursor is over the animation container.
  • On custom mouse interaction - Start the animation at mouse interaction.

Mouse interaction

This field provides options for custom mouse interaction. This field is available only when Start animation is set to On page load, On composition visible, or On custom mouse interaction. It provides three events that can be configured separately: On click, On mouse enter, and On mouse leave. For each of these three events the following actions are available:

  • Nothing - Do nothing.
  • Play - Play the animation.
  • Pause - Pause the animation.
  • Stop - Stop the animation.
  • Reverse - Play the animation in reverse.
  • Restart - Resar the animation from begining..
  • Toggle Play/Pause - Toggle between Play and Pause.

On subsequent clicks

This field is available only when Start animation is set to On mouse click. As the name suggests, you can use this field to configure what happens after the click that started the animation. The options are:

  • Nothing - Do nothing.
  • Reverse - Play the animation in reverse.
  • Restart - Restart the animation.
  • Toggle Play/Pause - Toggle between Play and Pause.

On mouse out

This field is available only when Start animation is set to On mouse over. You can use this field to configure what happens when the mouse cursor is no longer over the animation container. The options are:

  • Nothing - Do nothing.
  • Pause - Pause the animation.
  • Stop - Stop the animation.
  • Reverse - Play the animation in reverse.