data-trigger

Controls when effects activate. Separates effect behavior from activation timing.

Overview

The data-trigger attribute controls when an effect activates. It separates the visual effect from its activation moment, allowing the same effect to be triggered by scroll, hover, click, or a timed delay.

If no data-trigger is set, CSS-only effects activate immediately and JS effects run on load.

scroll

Activates when the element scrolls into the viewport (10% visible threshold). Uses IntersectionObserver and fires once.

<h1 data-effect="fade-in slide-up" data-trigger="scroll">Appears on scroll</h1> <p data-effect="reveal" data-trigger="scroll">Words reveal when visible</p>

hover

Activates on pointer enter, deactivates on pointer leave. For CSS-only effects, the :hover pseudo-class drives the animation directly.

<span data-effect="wiggle" data-trigger="hover">Hover to wiggle</span> <h2 data-effect="glitch" data-trigger="hover">Hover for glitch</h2>

click

Toggles the effect on click. Adds [data-effect-active] on first click, removes it on second.

<button data-effect="shake" data-trigger="click">Click to shake</button> <h2 data-effect="pop" data-trigger="click">Click to pop</h2>

time:`n`

Activates after a delay of n milliseconds. Uses setTimeout.

<h1 data-effect="fade-in" data-trigger="time:2000">Appears after 2 seconds</h1> <p data-effect="slide-up" data-trigger="time:500">Half-second delay</p>

No trigger (immediate)

When data-trigger is omitted, CSS-only effects activate immediately via their CSS selectors. JS effects run their activate() function on initialization.

<h1 data-effect="shimmer">Shimmers immediately</h1> <h2 data-effect="neon" class="pink">Glows immediately</h2>

Trigger independence

An effect doesn't know what triggered it. The same fade-in slide-up effect behaves identically whether activated by scroll, hover, click, or a timer.

Custom triggers

VB.trigger('visible', (el, activate, param) => { const threshold = parseInt(param || '50', 10) / 100; const io = new IntersectionObserver(([entry]) => { if (entry.isIntersecting) { io.disconnect(); activate(); } }, { threshold }); io.observe(el); return () => io.disconnect(); });

<h2 data-effect="fade-in" data-trigger="visible:50">50% visibility</h2>

Attribute reference

Trigger	Implementation	Notes
`scroll`	`IntersectionObserver`	Fires once at 10% visible, then disconnects.
`hover`	CSS `:hover` + JS events	CSS-only effects use `:hover`. JS effects use pointer events.
`click`	`addEventListener('click')`	Toggles `[data-effect-active]`.
`time:n`	`setTimeout`	`n` is delay in milliseconds.