Product media placeholder
Replace this area with a screenshot or short walkthrough video during the media sweep.
Boundary node — binds a DOM event listener on the target element and emits a graph pulse every frame an event fired. `fired` is 1/0 per frame; `count` is the number of events seen this frame (for click-counting / rapid-fire aggregation). The event queue captures every event between graph ticks, so nothing is dropped on busy frames.
Type eventListenerCategory inputsContext domDynamic ports noCompound no
Inputs
| Port | Type | Description |
|---|---|---|
| - | - | No ports declared. |
Outputs
| Port | Type | Description |
|---|---|---|
fired | float | 1 if any events arrived this frame, 0 otherwise. Use as a rising-edge pulse — wire into `pulseTween.play` / `pulseTween.restart`, `latch.pulse`, `bidirectionalCounter.increment`, or any node accepting a trigger pulse. |
count | float | Number of events seen this frame. Useful for rapid-click counting (multiple clicks in one frame) or aggregating events into a counter. Most consumers want `fired` (0/1) instead — `count` is for cases where the event multiplicity matters. |
Parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
target | elementSelector | "" | CSS selector for the element to bind the event listener on. Multiple matches: listener attaches to all matched elements; events from any of them fire the same `fired` pulse. Examples: `.btn-open`, `#modal-trigger`, `body` (page-wide). |
event | domEvent | "click" | DOM event name. Pick from the grouped list (pointer / keyboard / focus / form / scroll / clipboard) or type a custom event. The runtime calls `addEventListener(name, handler)` directly — any browser-supported event works. |
Use cases
- Modal / drawer open-close — bind `click` on a button, wire `fired` into a `pulseTween.play` (or `latch.pulse`) to drive a graph-native open/close transition. Replaces `addEventListener` boilerplate for graph-driven interactions.
- Hover toggles — pair two eventListeners (`mouseenter` + `mouseleave`) into `pulseTween.play` / `pulseTween.reverse` for forward-and-reverse animations on hover. Or use the `eventTween` compound which bundles this pattern.
- Click-count UIs — wire `count` into a `bidirectionalCounter` for like / vote / step counters. Each tick increments by the number of clicks that frame.
- Keyboard triggers — set `event: keydown` and gate downstream by a key-code expression (or use `keyboardListener` for built-in key matching).
Related nodes
Envelope
Use eventListener as the node type inside a graph node envelope. Add id, optional params, optional connections, and optional activeWhen based on the guide context.
Generated source
Registry faster-motion-docs/node-registry.jsonCategory page /help/faster-motion/faster-motion-node-category-inputs/