I resurrected an 8-year-old dead CSS library and gave it an engine
The author introduces 'Vivace,' a resurrected CSS library that enables developers to manage complex animations directly through HTML attributes. The library uses a lightweight engine to handle triggers like scroll, hover, and focus, simplifying animation workflows.
Why it matters
It offers a modern, declarative approach to web animation that reduces the need for heavy JavaScript frameworks or complex wrapper components.
Compose entrances, springs and staggers directly in your markup. A tiny engine handles when — scroll, hover, click, focus — and pure CSS handles how .
One call at your app's root. A MutationObserver keeps watching, so anything your framework mounts later registers itself.
import Vivace from 'vivace-css' import 'vivace-css/vivace.css' Vivace.init() 2 Write attributes Keys ( @ ) say what plays, modifiers ( _ ) tune it, data-viv-on says when. Everything composes.
<ul data-viv="@fd_child-ascend @sl-y" data-viv-on="appearing"> <li>Every list item</li> <li>slides up in</li> <li>sequence. That's it.</li> </ul> Every list item slides up in sequence. That's it. Small grammar, endless compositions Keys stack in one attribute; modifiers concatenate onto the key they tune. Click a card to replay it, or open it in the playground.
Get smarter about the news
Sign up free for a feed built around what you actually care about, Dive Deeper research on any story, and the full text of every article.
Create free accountAlready have an account? Sign in