Triggers & actions

Triggers

You can simulate interaction behaviors with triggers.

Trigger types

As of now, Creatie supports the following types of triggers:

img

  • 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.

img

  • 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.

img

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.

img

Actions

Once you set a trigger, you need to select the interactive action that follows the trigger event.

Action Types

Currently, Creatie supports the following types of actions:

img

  • Navigate to

  • Previous

  • Scroll to

    img

  • Open link

  • Swap variant

    img

  • Open overlay

  • Close overlay

  • Swap overlay

Notes for actions to take effect

Scroll to

  1. Make sure the height or width of the frame exceeds the display page.

  2. The trigger layer and the target layer needs to be in the same frame.

  3. Offset applies to the target layer and can be used to adjust the relative position of the target layer in this action.

  4. You can only set the scroll animation to be Instant or Animate.

img

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.

img

👍🏻 Helpful or 👎🏻 Not Helpful

👉🏻 Was this article helpful to you? We look forward to your feedback.
👍🏻 Helpful
👎🏻 Not Helpful

Swap libraries Animations & effects