ScrollEcho

Intersection-observer-driven text reveals with staggered character or word animations.

Initialization

const echo = ScrollEcho.auto(selector, options);

Also available as new ScrollEcho(selector, options). Returns the instance (registered on window.scrollTextTriggerInstances).

Options

Option	Default	Description
`type`	`"word"`	`"word"` or `"char"` reveal granularity.
`delay`	`40`	Stagger delay between pieces (ms).
`duration`	`400`	Transition duration (ms).
`threshold`	`0.15`	Viewport intersection ratio to trigger.
`transformY`	`"12px"`	Vertical rise offset.
`ease`	`"cubic-bezier(0.25,1,0.5,1)"`	CSS easing curve.
`onRevealComplete`	`null`	Callback fired when the reveal finishes.

Example

<h2 id="headline">Build reactive UI faster</h2>

ScrollEcho.auto('#headline', {
  type: 'char',
  delay: 20,
  duration: 500,
  threshold: 0.15,
  transformY: '12px'
});

Instance method

Method	Description
`retrigger(elementId)`	Resets and replays the reveal for the element with the given id.

The target element’s text is split into span.reveal-char or span.reveal-word nodes and animated once when scrolled into view. A guard (data-revealerInitialized) prevents double-init.