Adding Interactivity with Custom States

Custom States allow you to create interactivity with objects on the screen. The sates are triggered using any action trigger.

Watch video:

Let’s look at how to operate with custom states using the example of a chart element.

Select the parent element.
Go to the Actions tab and click on the ‘Custom States’ section to create a new state.

Without exiting the State editing mode, select the element you would like to adjust.
Make the appropriate changes to the desired widget. For example, here we made the following changes:
1. Reduced the height of the ‘Main’ bar element to create a contraction animation.
2. Revealed the text element by setting its opacity from 0% to 100%.

Now make all the desired adjustments to other elements if needed.

Please note: You can make changes only to the elements that are contained inside the element to which you applied a state. Otherwise, you will exit the state editing mode. However, you can always return to state editing by selecting it from the Custom States list.

Let's rename the states for easier operation. Double click on the state name and input a new name.

Next, create the second state using the other chart values.

Select the parent element.
Go to the Actions tab and hover over the state you previously created. Locate the ‘Duplicate’ button and click it.
Make the appropriate adjustments to your element.

Please note: State duplication can save you time if you have to adjust the same layers and attributes in different states. Otherwise, you can simply create a new state and make the appropriate adjustments.

How to adjust the animation properties?

Select the widget you have applied Custom State to.
Go to the Actions tab.
Go to the 'Custom State' section, then hover over the layer you'd like to adjust the animation for. Click on the gear icon.

If you change more than 1 widget’s property, you’ll see a menu where you will be suggested to adjust the animation for all attributes together or for each attribute individually.
1. Select the 'All' option to adjust all available attributes together.
2. Select the desired option to adjust it individually.

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

How to trigger Custom States?

Select the element or widget that should trigger the state.
Go to the Actions tab.
Select the desired trigger from the Quick Choice menu or click on the 'More' option to see all triggers.

Select the parent element as the Target for the action.

Open the Action section, locate the ‘General’ section, and click on it.
Next, select the ‘Trigger State’ action from the list.
1. Choose the ‘Set State’ option for the Event.
2. Select the appropriate state for the ‘State’.
Now repeat the same process for the other buttons and states.

Finally, let’s look at how to create the ‘Reset’ button using the ‘Unset State’ option.

Create your button and select it.
Go to the Actions tab and select the ‘Click’ option as a trigger.

Select the parent element as the Target for the action.

Expand the ‘Trigger State’ section.
1. Choose the ‘Unset State’ option for the Event.
2. Select the state you want to reset in the ‘State’ field.

Please note: you can also use the 'Clear State' option. Unlike the 'Unset State' option, which resets only the state per action, the 'Clear State' option removes all states.