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 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 also use custom CSS selectors to get data from the site; for this, you can click on the custom selector icon (map icon) (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 in Trigger panel.

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, click on the Time icon near the trigger.

Dynamic Placeholders

Many actions have the option to add dynamic placeholders; for this, click on cog icon in value field.

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

Dynamic selectors can be used to set dynamic values. Selector placeholder can be used to set Trigger or Action element dynamically.

By default, selector for trigger and action is element where you enabled Interactions, but you can change this if you click on map icon

Dynamic placeholders for custom trigger layer

{CURRENT} – will be used as search filter for current trigger. For example, if you put trigger selector as “.myclass”, then it will be added to all elements with class “myclass” on page. But what if you want to add this trigger only for specific child with this class and do not touch any other elements on page with the same class. In this scenario use
“{CURRENT} .myclass”

{CLOSEST:.selector} – this is the same as .closest(.selector) inside JS

Dynamic placeholder for custom Action layer

The action layer is the layer where the effect will be added.

{CURRENT} – check trigger placeholders. This will work the same

{CHILDREN} – this will be applied to all direct children of the current layer

{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 with the same order as a trigger. This scenario is useful for making tabs or galleries.

There is also more complex syntax. Example

{CLOSEST:.parent}{SELECTOR_ALL:.item:nth-child({TRIGGERINDEX})}

This custom selector means that plugin will take most closest “.parent” selector, then find there elements with class “.item” and apply action to the same index of elements as in trigger. Check our video for details

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}

Children selector

Use next word for applying selector to child items of current block

{CHILDREN}

Dynamic selectors for Dynamic values

When you enable Dynamic Values, you will find also field from where calculate value. For example, you can set dynamic height that depends on another block. There are also few placeholders for this field

{TRIGGERELEMENT} – use this if you use custom selector for actions but you want to calculate value from custom trigger element instead of current layer

{TRIGGERNEXT} will use next element from trigger

{TRIGGERPREVIOUS} will use the previous element from trigger

{TRIGGERPARENT} will use the parent element from trigger

{TRIGGERGRANDPARENT} will use the grand parent element from the trigger

{TRIGGERCHILD} will use direct first child from trigger

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)

Actions and Triggers

There are a lot of actions and triggers. From simple to complex. And we add more and more.

Action List

Motion Animations

• Animation

• Attributes

• Set class

• Remove class

• Toggle class

• Set attribute

• Remove attribute

• Toggle attribute

• Set CSS Property

• Storage

• Save to Browser Storage

• Remove from Browser Storage

• Save to Cookie

• Remove from Cookie

• Visibility

• Show Element

• Hide Element

• Toggle Element

• Slider block

• Move to Slide

• Pause slider

• Resume slider

• Manipulations

• Set HTML content

• Video Actions

• Rive App Actions

• Dynamic 3d Action

• Reusable Template Loading

• Lightbox Opening

• Custom Sliding Panel

Trigger List

• On Click

• On Mouse Enter

• On Mouse Leave

• On Window Mouse Move

• On Object Mouse Move

• On Enter viewport

• On Leave viewport

• On Focus

• On Blur

• On Key Down

• Scroll Distance Above

• Scroll Distance Below

• Motion Scroll

Extra Downloadable Content

Here are also some examples for you to investigate Interaction panels

P.s Dynamic Accordion is available now as separate Element. Check video

Dynamic Panels are available now as separate Action for Interaction Layers. Check video

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