Product media placeholder
Replace this area with a screenshot or short walkthrough video during the media sweep.
Time-based tween triggered by a DOM event. `onEvent` starts the play pulse; optional `offEvent` reverses it (e.g. `mouseenter`/`mouseleave` for hover toggles). Compound: expanded into `eventListener + (eventListener?) + pulseTween + propertyAnimation` — no runtime class. Use this in place of CSS transitions when authoring graph-driven interactions. Channels accept EITHER the terse `{from, to, cssUnit?, ease?}` shape (hand-authored / AI-generated) OR the standard `{cssUnit?, keyframes: [{time, value, ease?}]}` shape (FVE-edited).
Type eventTweenCategory animationContext sharedDynamic ports noCompound yes
Inputs
| Port | Type | Description |
|---|---|---|
| - | - | No ports declared. |
Outputs
| Port | Type | Description |
|---|---|---|
| - | - | No ports declared. |
Parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
trigger | elementSelector | "" | CSS selector for the element that emits the DOM event. Click / hover events are bound to this element. |
target | elementSelector | "" | CSS selector for the element whose CSS properties are animated. Leave empty to animate the event source itself. |
onEvent | domEvent | "click" | DOM event name that drives the play pulse. Most common: `click`, `mouseenter`, `pointerdown`, `focus`. Pick from the list or type a custom event. |
offEvent | domEvent | "" | Optional DOM event name that drives the reverse pulse. Leave empty for one-shot animations. Pair with `onEvent` for toggles: `mouseenter` / `mouseleave` for hover, `focus` / `blur` for focus rings. |
duration | float | 0.3 | Animation duration in seconds. The internal pulseTween clock advances 0→1 over this duration; channel keyframes interpolate across that 0..1 window. |
ease | easingCurve | "easeOutCubic" | Easing curve applied to the pulseTween clock. Per-keyframe eases on individual channels stack on top of this overall curve. |
channels | propertyAnimationChannels | {"opacity":{"cssUnit":"none","keyframes":[{"time":0,"value":0},{"time":1,"value":1}]}} | CSS properties to animate. Each channel = one CSS property + a keyframe list. Custom properties (`--name`) supported. Optional per-channel `template: "blur({value}px)"` wraps the float output into a CSS string (mutually exclusive with `cssUnit`). |
Use cases
- Hover toggles — `onEvent: mouseenter`, `offEvent: mouseleave`. Forward on enter, reverse on leave. Replaces `transition: <prop> Xs ease` CSS for graph-driven interactions.
- One-shot click reveals — `onEvent: click`, omit `offEvent`. Animates from `from` to `to` once and stays. Pair with a downstream gate node if you need it to reset.
- Modal / drawer open-close — set `trigger` to a button, `target` to the modal root, declare opacity / translate / clip-path channels. One node replaces 4-5 imperative wiring nodes.
Related nodes
Envelope
Use eventTween 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-animation/