Animate on mouse over

If you want to animate on hover, you will find this interactive export option and a real-time preview of your animation by clicking on the Export button in the top right corner of the app.

When you select the SVG (web) export option, you'll notice a few additional settings that become available, giving you more control over your animation's behavior. These settings include hover options, which are compatible with both JavaScript and CSS Only formats.

When configuring the hover options for your SVG animation, you can choose from several behaviors on mouse over, including pause, reset, reverse, or continue. These options allow you to control how the animation responds when a user interacts with the element, making your design more interactive and customizable.

Don't forget to refresh the preview each time you select a new option, so you can see how it works in real-time before actually exporting the file.

More articles:

How to Animate the SVG on Click? | SVGator Help

To start your animation on click after you export the SVG from SVGator, you must select JavaScript as the animation type.

SVGator

How to Animate the SVG on Scroll | SVGator Help

Learn how to animate on scroll in SVGator. Choose this option in the Export panel and the animation will start when it’s visible in the viewport.

SVGator

Still got questions? Send us an email to contact@svgator.com and we will get back to you as soon as we can.