Interaction Layers

Interaction panels allow you to make custom interactions and build your functionality which is not available as blocks.

You can find it in the Advanced — Interaction Layers panel in most of the Greenshift blocks and some premium blocks from the Query add-on.

The idea which is behind Interaction Layers is simple – You have triggers and actions. You can add unlimited layers (triggers) and attach unlimited actions to triggers.

By default, triggers and actions will be used on the current block where you add Interaction Layers, but you can use also custom css selectors to get data from the site, for this, you can click on custom selector button (available for triggers and actions)

Editor execution

By default, due to the huge amount of events and additional layers in Editor for toolbars and panels, scripts will be executed only on the Frontend part. But you can also use it in the editor by clicking on the Power button near Trigger.

We still recommend testing its final work on the frontend part, but simple scripts will work the same in the editor and on the front end.

Delay option

Scripts can have some delay in execution for triggers. To set it, you need to click on the Time icon near the trigger.

Dynamic Placeholders

Many actions have option to add dynamic placeholders, for this, click on icon

Dynamic placeholders add dynamic value.

Dynamic placeholders also support custom selectors. For example, when you use {{WIDTH}} placeholder, it will take the width of the current element where you added the action, but you may want to get the width from another element, for this, click on the map icon and put a custom unique selector

You can find details on how it can be used in our video about variables

There are many dynamic placeholders. They allow to get style of element, width, height, position in window, scroll position, data from cookie, local storage, random number, attribute value, mouse position, etc

Math Operations for values

When you set value in an attribute or CSS property, you can also do math operations. For example, you can get the width of the current element and add it to the width of another element, you can do this by clicking on the math button

Dynamic Selectors

There are a few ways to use dynamic selectors. They can be useful when there are several items on the page but you need to use only a specific one based on a custom Javascript function.

Currently, there are two basic ways to do this

Trigger Index Selector

You can use it by adding placeholder {TRIGGERINDEX} in the selector field for actions. It’s also available in CSS Selector Builder (click on the cog icon in the custom selector field to open it)

The trigger index will be calculated automatically based on the order in which the trigger element is among sibling elements. For example, if you have a container and you have 3 buttons in the container, the trigger index will get an order of buttons inside the container. This can be useful if you want to add action to relevant items for actions. In this scenario, our code will be applied to an element with a class test which has the same order as a trigger. This scenario is useful for making tabs or galleries.

Limit by closest

Imagine a situation when you have several similar pairs, for example, accordions where you have title and answer blocks. And you want to build interaction when click on title will open ONLY answer block below title and not all answer blocks on page. In this scenario you need to have Limit by closest option so plugin will get closest parent and then search element in it instead of using all elements

syntax example for custom selector

{CLOSEST:.parent}{SELECTOR_ALL:.test}

This syntax means that plugin will try to get closest parent with class “parent” and then find selector with class “test” in it.

You can also use just closest placeholder to get parent item

{CLOSEST:.parent}

Conditions

Each Action has also Condition option. All conditions are checked before action is executed.

There are also a few conditions that work only related to your trigger. For example, On Input change Trigger can have conditions by value (that is retrieved from changed input field)

Extra Downloadable Content

Here are also some examples for you to investigate Interaction panels

Do you want to study it in depth? Check our learning center