Setup

Add the InViewTrigger dependency to your module and place the following nodes in your screen's OnReady event in this exact order:

Step 1 — Define your callbacks

Add a JavaScript node (OnReady) and define the global functions that InViewTrigger will call:

window.OnElementEnter = function() {
        $actions.YourClientAction();
};

window.OnElementLeave = function() {
        $actions.YourOtherClientAction();
};

Replace YourClientAction and YourOtherClientAction with the actual names of your Client Actions.

Step 2 — Invoke InViewTrigger

Add the InViewTrigger action after the JavaScript node and configure its parameters.
For elements taller than the viewport, avoid using 1.0 as it will never trigger.

Important notes

• The JavaScript node defining the callbacks must always be placed before InViewTrigger in the flow.
• OnLeaveCallback will never fire if Once is set to true.
• If InViewTrigger is invoked multiple times on the same element, previous observers are disconnected automatically before new ones are registered.
• If the element is not found or is hidden, InViewTrigger exits silently and populates ErrorMessage with the reason.
  
  

Observing multiple elements

To observe multiple elements at once, define all callbacks in a single JavaScript node and then invoke InViewTrigger once per element, all after the JavaScript node.

Each InViewTrigger registers its own independent observer, so multiple instances on the same screen will not interfere with each other.

For a live preview please visit the Demo.