Adding Interactivity with Hover States

The Hover State option allows you to change the widget's properties when the user hovers over it.

1. Select the layer to which you want to apply the hover state. Go to the Actions tab at the top right corner.
2. Click on the Hover State option to enable the Hover State editing mode.

3. After enabling Hover State editing mode, navigate to the Properties tab.
4. Make the changes you wish to see on hover. For example, you can modify the background color, text color, widget's position or scale, border, etc.

How to adjust the Hover State animation?

1. Go to the Actions tab.
2. Hover over the Hover State option and click on the gear icon.

3. You can adjust the animation both for all attributes together and for each attribute individually.
   1. Select the 'All' option to adjust all available attributes together.
   2. Select the desired option to adjust it individually.

4. Here you can adjust the following attributes: animation duration, delay, and easing.

How to disable the Hover State editing mode?

To disable Hover State editing mode, simply click somewhere outside the widget to which the Hover State was applied.