The Ichava Motion engine
Animate any SVG with a class, a data attribute or one call. Try every preset on the icons from this site, then copy the code.
js-motion, in one paragraph
@ichava/js-motion is a framework-agnostic, JSON-driven animation engine for SVG icons and illustrations. It has no runtime dependencies: it plays presets through the Web Animations API, and its base families also ship as plain CSS keyframes, so an icon can move with no JavaScript at all.
It is the engine behind the motion on this page and in the icon browser, and it is open source on GitHub. It installs from a pinned git commit and ships its built files with a hash for each one, so nothing builds when you install it.
Everything the engine does
From one CSS class to a layered illustration you can scrub frame by frame.
240 presets, 40 families
Spin, pulse, heartbeat, bounce, swing, glow, draw and more, each in six variants: default, reverse, subtle and bold. dist/presets.json lists them all.
One handle for a group
Reveal, cascade, assemble, parallax and draw animate each layer, staggered. play() returns one handle with seek(), reverse() and a finished promise for every layer.
Pause, stop and destroy
pauseAll(), resumeAll() and stopAll() reach everything an engine started. Hand it your pause button for WCAG 2.2.2, and destroy() an engine of your own from create().
Layers turn on their own box
Every animated layer gets transform-box: fill-box, so a scale or a rotate pivots on the layer, and cancel() puts back every inline style it set.
Reduced motion, respected
It honours prefers-reduced-motion and a host [data-reduce-motion], and stops what is running when the setting changes while the page is open.
An integrity-pinned build
dist/integrity.json carries a sha384 for every built file, ready for an integrity attribute when you self-host the script.
Three ways to animate
A CSS class with no JavaScript, data-* attributes wired by auto(), or play() and animate() from code, with any easing, speed, delay and iteration count.
Zero dependencies
Web Animations with a CSS fallback, no inline scripts, nothing fetched. Lottie import is an opt-in extra, and its full mode stays off until you accept the risk.
Configure and extend
Register your own presets, easings, families and variants, per engine, so two embeds on one page never share settings.
Try it on the icons from this site
Pick an icon, a preset and its options, then play, pause, scrub, reverse and stop it. The code below always matches what you see.
The group families (marked *) animate an SVG’s layers, so they play on the layered sample.
import IchavaMotion from '@ichava/js-motion';
import '@ichava/js-motion/css';
// An engine of your own: destroy() then cannot reach another embed’s animations.
const motion = IchavaMotion.create();
const handle = motion.play(document.querySelector('#icon'), 'heartbeat', {
speed: 1,
easing: 'ease-in-out',
iterations: 'infinite',
});
handle?.pause();
handle && (handle.currentTime = 400);
handle?.reverse();
await handle?.finished;
motion.destroy(); // unwire and stop everything this engine started
<!-- or declaratively, wired by motion.auto(root) -->
<svg data-ichava-motion="heartbeat" data-motion-trigger="load" data-motion-speed="1" data-motion-easing="ease-in-out" data-motion-iterations="infinite">…</svg>Add it to your project
It is not on npm: install it from GitHub at the commit below. Then pick the tier you need.
{
"dependencies": {
"@ichava/js-motion": "github:ichava/js-motion#66b2773213dbbebdcf30932f4efc2061fc6fa521"
}
}Restyle any line pack, live
Treatments change how a line icon is painted without changing the file: every icon stays the same SVG.
| Icon | Stroke | Solid | Dual | Mid | Half |
|---|---|---|---|---|---|
| rocket | |||||
| heart | |||||
| camera | |||||
| accessible |
- Five treatments: Stroke, Solid, Dual tone, Midtone and Halftone.
- Applied live, to the whole pack at once, in the playground above and in the icon browser.
- Flags and colour emoji keep their own colours.
- In the icon browser, a stroke-width control and copy-ready code for every treatment.
See inside the icon browser
Ichava DevTools is a drawer inside the icon browser for the people who build with it.
- Events, State, Storage, Logs and Boot tabs, plus the browser’s own self-tests.
- A Status tab for users who hold the ichava.admin ability.
- Docks to any edge of the window, and opens with ⇧⌘D.
- Ships in debug builds with the devtools feature on; production builds leave it out.
Read the full guide
Every option, every family and the Lottie tier are documented in the repository.