Interactions is a special one in Lightwell. Interactions make your app interactive based upon various triggers

Adding Interactions

To apply an interaction, navigate to the Interactions tab  and then press "+ New."

Whenever you create a new interaction, that interaction will be unique to the scene it was created in.

Interaction Types

There are eight different interaction types for you to create within Lightwell. They fall into the following three categories: Touch Triggers, Device Triggers, and Event Triggers.

Touch Triggers:

Apply a Touch Trigger by dragging the trigger into the canvas on the selected layer. 

  • Tap - This is the most straightforward interaction. This interaction is defined by tapping the layer. You can control when you want the action to occur based on the users tap on touch down or up. (Touch down means when the user taps on the layer, the action will occur immediately. Touch up means when the user releases the layer, the action will occur.)
  • Press - This interaction is defined by how long you press down on a layer. It's measured in whole seconds.
  • Drag - For this interaction to work, a target layer must be specified. The trigger layer is dragged to a target layer to cause an effect. You can choose whether the layer animates back to its starting position or stays put if the drag ends outside of the intended target.
  • Swipe - This interaction is defined by the direction a trigger layer is swiped. You can select an angle and range of swipe motion with either the text input fields or the circle interface.

Device Motion Trigger

Apply a Device Trigger by selecting the trigger and filling out the interaction on the left panel.

  • Tilt - This interaction is defined by a simple directional tilt of the device: up, down, right or left.
  • Shake - This interaction is defined by a shake of the device in any and all directions.

Event Trigger

Apply an Event Trigger by selecting the trigger and filling out the interaction on the left panel.

  • Animation - This interaction is defined by the start or end of a specified animation.
  • Audio - This interaction is defined by the start or end of a specified audio.
  • Scene - This interaction is defined as the moment after the scene has been loaded, and the transition to the screen completes.

Creating Logic Flows and Cards

Logic flows are specific to each interaction that is created. You can think of them as individual event handlers. Once an Interaction is created, it will appear on the right panel for you to organize.

Each trigger causes an action or a condition. You can create assign an action or a condition by adding a new card. 

At the end of each card, you can add an additional action or condition to make your logic flow more complex. 

Simply, click on the Ellipses icon to create an action (+) or a condition (if/else) card.

Now, you add logic to make actions and conditions more complex


Read More Related Articles:

Did this answer your question?