Vivace | animate with attributes

@fd fade@sl slide@rt rotate@sc scale@sp spiral@vb vibrate@pr perspective@bn bounce@sh shake@fl flick@bl blur@sw swing@pop pop@dr drop@sq squash@hb heartbeat@wv wave@gl glow 1Initialize once One call at your app's root. A MutationObserver keeps watching, so anything your framework mounts later registers itself. 2Write attributes Keys (@) say what plays, modifiers (_) tune it, data-viv-on says when. Everything composes. Every list item slides up in sequence. That's it. Keys stack in one attribute; modifiers concatenate onto the key they tune. Click a card to replay it, or open it in the playground. load, appearing, hover, click and focus — one shared IntersectionObserver and a handful of delegated listeners for the whole page, no matter how many elements animate. trigger reference hover me scrolled in Exit animations that resolve as promises, bubbling lifecycle events (vivace:play, vivace:end), and a plugin API for your own keys and triggers — at runtime or as SCSS plugins. await Vivace.out(el) — remove without a flash events for chaining logic off animations defineKey / defineTrigger, one-file SCSS plugins prefers-reduced-motion built in — content never hides extending vivace Attributes pass through every renderer, and dynamically mounted elements register themselves. No wrapper components to import, ever. HTML Svelte React Vue Chain tokens in the playground, watch it live on real page sections, copy the attribute out — or ship it to the community gallery. Try the playground Browse the gallery