Triggers

data-viv-on decides when a composition fires. This is Vivace's core upgrade over CSS-only animation libraries: one engine, shared observers, no per-element listeners.

Trigger	Fires	Implementation
`load` (default)	as soon as the element is registered	immediate; MutationObserver registers SPA-mounted elements
`appearing`	when the element enters the viewport	one shared IntersectionObserver for the whole page
`hover`	on pointer enter	single capture listener on the document
`click`	on click / tap	event delegation
`focus`	when the element receives focus	`focusin` delegation — great for form fields

Try them

hover me

scrolled in

Replay on every scroll

appearing fires once by default. Add data-viv-repeat-scroll and the element re-arms whenever it leaves the viewport:

html

<div data-viv="@sl-y" data-viv-on="appearing" data-viv-repeat-scroll>

Programmatic control

import Vivace from 'vivace-css'

Vivace.trigger(el)  // fire or restart, regardless of trigger type
Vivace.pause(el)    // freeze mid-animation
Vivace.play(el)     // unpause — or fire if it never ran
Vivace.destroy()    // remove all listeners and observers

Accessibility

Under prefers-reduced-motion: reduce, every animation collapses to an instant snap: entrances appear immediately, exits still hide. No content is ever lost behind a paused entrance animation.