Interaction - triggers and actions
Triggers
You can simulate interaction behaviors with triggers.
Trigger types
As of now, Creatie supports the following types of triggers:
- Tap
- Hover
- Press
- Drag
- Mouse down
- Mouse up
- Cursor enter
- Cursor leave
- Delay
Set triggers
You can set trigger events in two ways in Creatie:
- In prototype mode, select the object to which you want to add interactions. Click on + right to Interactions in the right sidebar to add a new interaction. Click the interaction bar to bring up the interaction settings panel.
- In prototype mode, select the object, hold down + on its right side, drag out a connector and connect it to the target object, and you can see the interaction settings panel.
Notes for triggers to take effect
-
Any frame can set all triggers except Delay.
-
Only top-level frames can have Delay triggers applied to them.
-
A single frame can have different triggers. However, if the single frame have two triggers with overlapping actions, only one trigger will take effect. A warning icon will show when an interaction does not take effect.
Actions
Once you set a trigger, you need to select the responsing interactive action that follows the trigger event.
Action Types
Currently, Creatie supports the following types of actions:
-
Navigate to
-
Previous
-
Scroll to
-
Open link
-
Swap variant
-
Open overlay
-
Close overlay
-
Swap overlay
Notes for actions to take effect
Scroll to
-
Make sure the height or width of the frame exceeds the display page.
-
The trigger layer and the target layer needs to be in the same frame.
-
Offset applies to the target layer and can be used to adjust the relative position of the target layer in this action.
-
You can only set the scroll animation to be Instant or Animate.
Open overlay
The target of Open overlay must be a frame.
Close overlay
Close overlay only takes effect on frames that have been set as overlays.
You can select this overlay and drag + on the right side to set Close overlay action quickly.
👍🏻 Helpful or 👎🏻 Not Helpful
👉🏻 Was this article helpful to you? We look forward to your feedback.
👍🏻 Helpful
👎🏻 Not Helpful