Class ViewTrigger

ViewTrigger allows you to run actions when the viewport's scroll position relative to a given target or offset from top/bottom/left/right is one of the matching "views" (at/above/below/left/right), and undo those actions when the viewport's "view" is not matching.

To use with auto-widgets (HTML API), see registerTrigger for the specification.

  • Arguments (optional): One or more (comma-separated) Views. Default is "at".
  • Additional trigger options:

Example

Show the element when it's in the viewport, hide otherwise.

<div data-lisn-on-view="at @show"></div>

Example

Same as above. "views" is optional and defaults to "at".

<div data-lisn-on-view="@show"></div>

Example

As above but using a CSS class instead of data attribute:

<div class="lisn-on-view--@show"></div>

Example

Show the element 1000ms after the first time it enters the viewport.

<div data-lisn-on-view="@show +once +delay=1000"></div>

Example

Add class seen the first time the element enters the viewport, and play the animations defined on it 1000ms after each time it enters the viewport, reverse the animations as soon as it goes out of view.

<div data-lisn-on-view="@add-class=seen +once ;
                        @animate +do-delay=1000"
></div>

Example

Add class seen when the viewport is at or below the element (element above viewport), remove it when the viewport is above the element. Element going to the left or right of the viewport will not trigger the action. See getOppositeViews:

<div data-lisn-on-view="at,below @add-class=seen"></div>

Example

Add class cls when the viewport is above or to the left the element (element below or to the right of the viewport), remove it when the viewport is either at, below or to the right of the element.

<div data-lisn-on-view="above,left @add-class=cls"></div>

Example

Hide the element when the viewport is above the next element with class section, show it when the viewport is below or at the target element.

<div data-lisn-on-view="above @hide +target=next.section"></div>
<div class="section"></div>

Example

As above, but using data-lisn-ref attribute instead of class selector.

<div data-lisn-on-view="above @hide +target=next-section"></div>
<div data-lisn-ref="section"></div>

Example

Open the Openable widget configured for this element when the viewport is 75% down from the top of the page.

<div data-lisn-on-view="@open +target=top:75%"></div>

Hierarchy (View Summary)

Methods

get register

Constructors

constructor

Properties

destroy disable enable getActions getConfig getElement isDestroyed isDisabled onDestroy onDisable onEnable reverse run toggle toggleEnable

Methods

Staticget

Staticregister

Constructors

constructor

Properties

Readonlydestroy

destroy: () => Promise<void>

Undoes all modifications to the element and returns it to its original state.

You will need to recreate it if you want to enable its functionality again.

Readonlydisable

disable: () => Promise<void>

Disables the functionality of the widget. What this means is specific to each widget.

Readonlyenable

enable: () => Promise<void>

Re-enables the functionality of the widget. What this means is specific to each widget.

ReadonlygetActions

getActions: () => Action[]

Returns the trigger's actions.

ReadonlygetConfig

getConfig: () => ViewTriggerConfig

Returns the trigger config.

ReadonlygetElement

getElement: () => Element

Returns the element passed to the widget constructor.

ReadonlyisDestroyed

isDestroyed: () => boolean

Returns true if the widget is destroyed.

ReadonlyisDisabled

isDisabled: () => boolean

Returns true if the widget is currently disabled.

ReadonlyonDestroy

onDestroy: (handler: WidgetHandler) => void

The given handler will be called when the widget is destroyed.

ReadonlyonDisable

onDisable: (handler: WidgetHandler) => void

The given handler will be called when the widget is disabled.

ReadonlyonEnable

onEnable: (handler: WidgetHandler) => void

The given handler will be called when the widget is enabled.

Readonlyreverse

reverse: () => Promise<void>

"Undo"es all the Actions linked to the trigger.

Readonlyrun

run: () => Promise<void>

"Do"es all the Actions linked to the trigger.

Readonlytoggle

toggle: () => Promise<void>

"Toggle"s all the Actions linked to the trigger.

ReadonlytoggleEnable

toggleEnable: () => Promise<void>

Re-enables the widget if disabled, otherwise disables it.

Settings

Member Visibility

On This Page

Methods
Constructors
Properties