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.

animate on mouse over
Click the Export button to access all the options

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.

animate on mouse over
Animation will starts on mouse over

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:

Animate on click

Animate on scroll


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