Mouse Over and Click Web Animations

Web Animations - Mouse-over and on-click Animations


This is the basic set of animations that occur - those that happen when you either click an object (for use on a pop-up layer for example) and those that happen when you hover over an object (for subtle button highlights, Navbars, tooltips etc)

How to apply

MouseOver (hover) animations

Simply right-click the object with the selector tool, click Web Animations and then under the Mouse-over tab, select an effect from the dropdown list.

You can then use the speed setting to change the rate at which the effect occurs

That's all you need to do. Xara will then animate the MouseOver version onto your button. If you want a little ballon or tooltip appear as well, you can use the show pop-up text option and enter text there. Use the show pop-up layer option to show a layer on hover.

On-click animations

Same as the above instructions, Right-click the object, click web animations but under the click/touch tab instead

In either option, you can also set the document default settings, so this attritube is applied to all MouseOver or on-click objects. This can still be overwritten by the individual setting.

Limitations with the Animation system

There are a number of things you also can't perform, please see the list below for what isn't currently possible. We are making improvements to the animations constantly so there are some things we may change in future updates:

  • Make Custom Animations
  • Specify the animation timing (other than the preset slow, normal, fast etc)
  • Apply an animate out effect
  • Apply multiple animations to an object

If you have any suggestions for improvements please let us know at

Frequently Asked Questions

Will web animations work on mobile devices?

Yes, web animations are CSS based and is supported in all major mobile and desktop browsers.

Note: Web Animations are not supported in Opera Mini 5.0 - 8.0 & I.E 8.0 - 9.0

What versions support Web Animations?

Web Designer Premium and Designer Pro from version 11-12 support all web animations.
Web Designer 11-12 standard only supports mouse-over animations.

For compatibility between objects please see the overview page.

Other types of Animations

(2 vote(s))
Not helpful