LayoutTrigger allows you to run actions when the viewport or a target element's width or aspect ratio matches a given specification, and undo those actions when the target's width or aspect ratio no longer matches.
ClickTrigger allows you to run actions when a user clicks a target element (first time and every other time, i.e. odd number of click), and undo them when a user clicks the target element again (or every even number of clicks). It always acts as a toggle.
PressTrigger allows you to run actions when the user presses and holds a pointing device (or their finger) on a target element, and undo those actions when they release their pointing device or lift their finger off.
HoverTrigger allows you to run actions when the user hovers overs a target element, and undo those actions when their pointing device moves off the target. On touch devices it acts just like PressTrigger.
ScrollTrigger allows you to run actions when the user scrolls a target element (or the main scrollable element) in a given direction, and undo those actions when they scroll in the opposite direction.
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.
Specification for the HTML API for triggers
The following describes the general syntax when using the HTML API and automatic widgets (settings.autoWidgets is true) specifically for triggers and actions.
A trigger specification should be given as a
data-lisn-on-<TriggerName>="<TriggerSpecList>"
attribute. A fallback option of using a CSS class of the formlisn-on-<TriggerName>--<TriggerSpec>
is also supported but not recommended.The general specification for a trigger is of the form:
where
<TriggerArg>
is the particular trigger's main argument, which could be required or optional (and not all triggers accept an argument). See each trigger's specification for their arguments and options.Also refer to each action for their accepted arguments and/or options if any.
NOTE:
There can be 0 or more spaces around any of the separator characters.
At least one action (with a preceding "@" character) is always required.
The characters ";", ",", "=", "@", "+" and ":" are reserved separators and cannot be used literally as part of an argument or option value.