Welcome to Vanilla Breeze
This bell pulls live notifications from /go/notify/messages — the same contract documented at /docs/concepts/service-contracts/. Static articles like this one are the no-JS / no-backend fallback.
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.
Scroll trigger
<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.
Hover trigger
<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.
Click trigger
<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.
Time trigger
<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.
Immediate (no trigger)
<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
Register custom triggers via the VB.trigger() API. Custom triggers work identically to built-in ones.
Custom trigger registration
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();});Custom trigger usage
<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. |