What are Actions?

Actions allow you to create different animation effects, navigate within pages, control navigation, interact with widgets, track goals and more.

1. Select the object you want to add an action to. Next, locate the ‘Actions’ tab at the top-right corner and open it.
2. Select the desired action trigger from the quick selection list:
   1. Click: Triggers an action by clicking on the selected object.
   2. Page Visible: Triggers an action when the page loads and the object enters the viewport.
   3. Scroll: Triggers an action when the user scrolls to the selected object.
   4. More: This option allows you to skip selecting a trigger at this step.

Let’s select the ‘More’ option to view the other triggers.

After selecting the ‘More’ option you will be moved to the ‘Configure Action’ menu. This menu contains all the main action settings:

Trigger: This option allows you to select the condition that will start the action execution process.

Click on the ‘Trigger’ section to expand the full list of available triggers.

Currently, there are 10 default triggers and 1 custom event trigger:

• Page Visible: Triggers an action when the page loads and the object enters the viewport.
• URL: Triggers an action using the previously created URL.
• Scroll: Triggers an action when the user scrolls to the selected object.
• Build In/Out: This trigger allows the user to navigate between states within a single page using the arrow keys.
• Click: Triggers an action by clicking on the selected object.
• Toggle: This trigger is similar to a click, but it not only executes an action, it also allows you to return to the default state on the second click.
• Mouse Over (desktop): Triggers an action when the cursor hovers over the selected widget.
• Mouse Out (desktop): Triggers an action when the cursor exits the area of the selected widget.
• Rollover (desktop): This trigger combines the ‘Mouse Over’ and the ‘Mouse Out’ action. It triggers the action when the cursor hovers over the selected widget and cancels the action once the cursor exits the area of the widget.
• Pre Display: This trigger allows you to set the initial state of the object.
• Event: This option allows the user to set a custom event as a trigger for an action. For instance, selecting the 'Media Play' event enables you to bind an animation effect or a navigation action to occur automatically when the media begins playing.

Target: By default, the target object is the widget to which you’re applying the action. This option allows you to select a different object as the target for your action while leaving the widget with the action as the trigger.

Custom Selector: This option allows you to set a target using widget's ID. It is useful when you need to target a widget from another page within your project.

Action: Here, you can select the action you want to apply.

Action Configuration: Most of the actions and animation effects have adjustable attributes. Select the appropriate action and click on the gear icon to expand the configuration menu.

General: This section includes basic actions.

Navigation: This section includes actions that control both switching between pages and navigating within a single page.

Scroll-driven Animation: The animation effects in this section are triggered when the user scrolls to the element where the action is applied. The animations continue to run as you scroll and stop when you stop scrolling.

Text Animation Effects: Here you can choose and apply the desired text animation style.

The main difference between Animation Effects and Text Animation Effects is that Animation Effects apply to the entire widget, while Text Animation Effects apply specifically to the text within your text block widget. This allows for more detailed adjustment of the animation.

Text Animation Effects. Adjustment.

Direction: This attribute controls the direction of the animation, if applicable.

Apply To: This attribute allows you to select what exactly will be affected by the animation - line, word, or letter. For example, if you select the ‘word’ option for the Fade In animation effect, the text block will appear word by word.

Order: This attribute controls the direction in which the animation is executed.

Easing: This attribute controls the smoothness of the animation and the style of that smoothness. Here is a list of easing styles.

Ease In: This easing function starts slow and then accelerates towards the end. It’s useful when you want the animation to have a gradual start.

Ease Out: Opposite to Ease In, this easing function starts fast and then decelerates, making the animation slow down as it finishes.

Linear: This easing function creates a constant speed throughout the animation, without any acceleration or deceleration. It’s a straightforward, uniform transition.

Duration: This attribute allows you to control the speed of animation.

Delay: This attribute allows you to postpone the start of the animation.

Change HTML Code: This section includes actions that control classes, styles, and JS functions.