Interactivities are essential for your project: they bring your states to life and create transitions from one state to another. Without interactivity, your project will be stuck in the initial state you defined.
Interactivity comes in two steps:
- choosing a trigger, explained in this article;
- and then choosing the action, explained in the article Create an interactive action
Select the object of your choice, go to the Interactivities window and click on + ADD ACTION to display the list of triggers. Depending on the selected object, you won’t have access to the same list. Each object has a predefined list of triggers, but there are also new triggers when you customize a component.
1. Standard triggers
a. Based on screens and states
If you don’t select a particular object, you select the current screen or the state (depending on where you are). You have access to the following triggers:
- State display
- Screen display
Note: screen display is the event of displaying the “first state” of your screen. Depending on the parameters and actions you defined, the “first state” can be your default state, the first state in the list, or the state to which users have access from another screen.
Those triggers make it possible to automatically launch an action when displaying a screen or a state.This creates easy animations that don't require any intervention from the user.
b. Based on shapes
When you select a shape, you have access to this list of triggers linked to your users' gestures on that object. There are 8 possible triggers:
- Single tap
- Double tap
- Touch down
- Touch up
- Swipe down
- Swipe up
- Swipe left
- Swipe right
c. Based on components
If you select a component, you have a list of triggers based on its main features.
2. Advanced triggers
When you edit components (new page, new state etc.), you have access to new triggers. When you create markers, they can also be used to launch actions, i.e. you can define that when your component reaches a specific place, an action is launched. Triggers tied to markers are in the list of advanced triggers.
For further information on how to create and use markers, please refer to the dedicated article: Learn about markers.
All those triggers are in the same list, but they are located at the top of the list.
4. The Interactive Zone component
The Interactive Zone component helps you create an interactive zone that is distinct from your state's elements. It's a transparent zone and you can place it wherever you like and select it as a trigger before clicking on Interactivities. For further information, see Create an interactive zone.
You've chosen your triggers? Now it’s time to select your action to finalize your interaction (Create an interactive action).