white-logo

KappaX

burger-icon
search-icon

/

Adding Interactivity to Layers

Are you looking to add interactivity to your design project without any coding? KappaX makes it easy with Logic Blocks. With just a few simple English statements, you can create interactive layers that respond to user clicks or touches. Let’s dive into how to use Logic Blocks in KappaX.

Understanding Events

In KappaX, everything is event-based. For this tutorial, we will focus on the click event. Whenever a user clicks or touches a layer, a ‘Click’ event is emitted. KappaX uses these events to trigger different logic blocks.

Interactivity1

Adding Logic Blocks

To add a Logic Block, select a layer, open the Logic Panel, and select the Click event. Now, whatever you write in this panel will get executed when the user clicks on this layer.

A Logic Block has two parts: Rules and Actions. A block is executed only when all the Rules are True. Rules are nothing but AND and OR conditions. Actions are a set of tasks that will execute to make the elements interactive. You can also add multiple Logic Blocks under one event to create more complex interactions. Each block will have its own set of Rules and Actions.

Know more about Rules and Actions.

Interactivity2

 

Writing Simple Statements & Preview

Now that you understand the basics, let’s write a simple statement as an Action. For example, let’s say we want to “Play the main video” when the user clicks on a layer. Simply add a Logic Block, and write the Action statement. Select the action (i.e. Play) followed by the layer (i.e, Main Video).

Preview your work by clicking the Preview button and then click on the layer where you’ve written the logic. Voila! You’ll see the logic executing.

Interactivity3

Adding More Actions

To add more Actions, go back to Edit mode, select the layer, and add more Actions. These Actions will get executed in the order they are written. For instance, you can add a Hide Button, set the height of an image to 1000px, and much more.

Interactivity4

With simple English statements, you can create interactive layers that respond to user clicks or touches. Start exploring and creating your own unique interactions today!

On this page

Understanding Events

Adding Logic Blocks

Writing Simple Statements & Preview

Adding More Actions