33 animations · 6 categories · 0 network calls
Type what you mean.
Get the motion.
A curated set of CSS/JS UI animations, found by plain prose. No API,
no key, no class names to memorize — describe the moment and
semantic-animations finds the closest match, right here
in your browser.
Install
Zero required dependencies. Works with any framework, or none.
# npm
npm install semantic-animations
// vanilla JS import { playAnimation } from 'semantic-animations'; import 'semantic-animations/animate.css'; await playAnimation(toast, 'slide in from below');
Or skip the JS
Every animation is a plain CSS class. Link the stylesheet and go.
<link rel="stylesheet" href="node_modules/semantic-animations/styles/animate.css" /> <div class="sa-fade-in">Welcome</div>
// React import { useSemanticAnimation } from 'semantic-animations/web'; useSemanticAnimation(ref, 'task completed', saveCount);
The catalog
Nothing in the catalog matches that. Try a different phrase — or that gap is honest: not every motion belongs in a curated set.
Reduced motion, by default
Every animation here is disabled under prefers-reduced-motion:
reduce. An entrance that starts invisible, or an exit that ends
invisible, is explicitly returned to its settled state in that same
rule — turning motion off never leaves an element stuck hidden.
This is written once, in styles/animate.css, and applies to all 33 animations — nothing to configure per component.