# spark-html-motion

> Declarative enter/leave transitions for spark-html — transition="fade|slide|scale" on if/each blocks, Web Animations API, 0 deps, no compiler.

Latest version **1.0.0** (published 2026-07-08) · MIT license · 298 weekly downloads

## Install

```sh
npm install spark-html-motion
pnpm add spark-html-motion
yarn add spark-html-motion
bun add spark-html-motion
```

## Health

**Score 75/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2026-07-08 |
| First published | 2026-06-28 |
| Weekly downloads | 298 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 11.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 2 |
| Maintainers | wilkinnovo |
| Keywords | spark-html, motion, transition, animation, enter-leave |

## Links

- npm: https://www.npmjs.com/package/spark-html-motion
- Repository: https://github.com/wilkinnovo/spark-html
- Homepage: https://wilkinnovo.github.io/spark-html
- Issues: https://github.com/wilkinnovo/spark-html/issues
- npm.io page: https://npm.io/package/spark-html-motion

## Alternatives

- [@luma.gl/experimental](https://npm.io/package/@luma.gl/experimental.md) — 77.1K weekly downloads
- [persona-harness](https://npm.io/package/persona-harness.md) — 4.7K weekly downloads
- [@tsparticles/effect-bubble](https://npm.io/package/@tsparticles/effect-bubble.md) — 4.6K weekly downloads
- [f3d](https://npm.io/package/f3d.md) — 730 weekly downloads
- [react-scroll-snap-anime-slider](https://npm.io/package/react-scroll-snap-anime-slider.md) — 214 weekly downloads

## Recent versions

- 1.0.0 (latest) — 2026-07-08
- 1.0.0-rc.2 (rc) — 2026-07-07
- 1.0.0-rc.1 — 2026-07-07
- 0.1.9 — 2026-07-03
- 0.1.8 — 2026-07-03
- 0.1.7 — 2026-07-03
- 0.1.6 — 2026-07-02
- 0.1.5 — 2026-07-02
- 0.1.4 — 2026-07-02
- 0.1.3 — 2026-06-30
- 0.1.2 — 2026-06-30
- 0.1.1 — 2026-06-28
- 0.1.0 — 2026-06-28

## README

# spark-html-motion

Declarative **enter / leave transitions** for
[spark-html](https://github.com/wilkinnovo/spark-html) — the Spark way: no compiler,
no virtual DOM, 0 dependencies (1.5 kB gzipped). When an `<template if>` / `<template
each>` block adds or removes an element, it animates in/out. A leaving element
is held in the DOM until its exit animation finishes, then removed.

## Install

```sh
bun add spark-html-motion
```

## Use

Register once, **before `mount()`**, then opt elements in with a `transition`
attribute:

```js
import { mount } from 'spark-html';
import { motion } from 'spark-html-motion';

motion();
mount(document.body);
```

```html
<template each="t in todos">
  <li transition="slide">{t.text}</li>
</template>

<template if="open">
  <div class="panel" transition="fade">…</div>
</template>
```

- `transition="fade | slide | scale"` — or the directive form `transition:fade`.
- `transition-duration="300"` — milliseconds (per element).
- `transition-easing="ease-out"` — any CSS easing (per element).

The **initial render is not animated** by default (only later enters/leaves) —
pass `motion({ appear: true })` if you want the first paint to animate too.
`prefers-reduced-motion: reduce` is honored automatically (no animation).

## Options & defaults

```js
motion({
  preset: 'fade',   // default preset for a bare `transition` attribute
  duration: 200,    // ms
  easing: 'ease',
  appear: false,    // animate the initial mount?
});
```

## Custom presets

`presets` is a plain object of `{ in: Keyframe[], out: Keyframe[] }` (standard
[Web Animations](https://developer.mozilla.org/docs/Web/API/Element/animate)
keyframes) — add your own:

```js
import { presets, motion } from 'spark-html-motion';
presets.zoom = {
  in: [{ transform: 'scale(0)' }, { transform: 'scale(1)' }],
  out: [{ transform: 'scale(1)' }, { transform: 'scale(0)' }],
};
motion();
// <li transition="zoom">…</li>
```

## How it works

Spark core exposes a tiny `lifecycle({ enter, leave })` seam; this package
registers into it and drives the Web Animations API. Nothing animates unless you
call `motion()`, and elements without a `transition` attribute are added/removed
instantly — so the cost is strictly opt-in.

## The Spark family

Small, single-purpose packages that share one philosophy: no compiler, no
virtual DOM, no build step required — built for humans who love hand-writing
their web apps. Add only what you use.

| Package | What it does |
|---|---|
| [`spark-html`](https://www.npmjs.com/package/spark-html) | The runtime — components, reactivity, stores, forms, scoped styles. ~14.4 kB gzip, 0 deps. |
| [`spark-html-bun`](https://www.npmjs.com/package/spark-html-bun) | Dev server, bundler & preview on Bun — scoped HMR, no-build dev, post-build pipeline. |
| [`spark-html-router`](https://www.npmjs.com/package/spark-html-router) | `<template route>` routing — nested routes/layouts, `route.query`, active links. |
| [`spark-html-theme`](https://www.npmjs.com/package/spark-html-theme) | Dark/light/system theming in one line — persisted, no flash. |
| [`spark-html-head`](https://www.npmjs.com/package/spark-html-head) | Reactive `<title>`/`<meta>` per route + a `head` store. |
| [`spark-html-motion`](https://www.npmjs.com/package/spark-html-motion) | Enter/leave transitions on if/each blocks — `transition="fade|slide|scale"`. |
| [`spark-html-devtools`](https://www.npmjs.com/package/spark-html-devtools) | In-page devtools — live stores, component tree, patch activity. |
| [`spark-html-query`](https://www.npmjs.com/package/spark-html-query) | Declarative async data — a self-fetching store (`loading`/`error`/`data`/`refetch`). |
| [`spark-html-persist`](https://www.npmjs.com/package/spark-html-persist) | Persist stores to localStorage/sessionStorage in one line. |
| [`spark-html-websocket`](https://www.npmjs.com/package/spark-html-websocket) | A WebSocket as a reactive store — auto-reconnect, JSON, `send()`. |
| [`spark-prerender`](https://www.npmjs.com/package/spark-prerender) | Build-time SEO prerender + sitemap/robots — no SSR server. |
| [`spark-ssr`](https://www.npmjs.com/package/spark-ssr) | Full-stack SSR on Bun — the template is the backend: inferred DB, REST CRUD, auth, live updates. Precompiled + response-cached: fast by default. |
| [`spark-html-image`](https://www.npmjs.com/package/spark-html-image) | Build-time image optimization — webp/avif + responsive `srcset`, zero config. |
| [`spark-html-font`](https://www.npmjs.com/package/spark-html-font) | Font loading optimizer — preload + size-adjusted fallbacks, no FOUT. |
| [`spark-html-manifest`](https://www.npmjs.com/package/spark-html-manifest) | PWA manifest + icons + head tags (and optional service worker) from one config. |
| [`spark-html-offline`](https://www.npmjs.com/package/spark-html-offline) | Offline URL imports — a service worker that caches CDN components. |
| [`spark-html-sri`](https://www.npmjs.com/package/spark-html-sri) | Subresource Integrity — hash + verify assets and remote components. |
| [`create-spark-html-app`](https://www.npmjs.com/package/create-spark-html-app) | Scaffold a spark-html app in one command. |
| [`prettier-plugin-spark`](https://www.npmjs.com/package/prettier-plugin-spark) | Prettier for components — formats `<script>`/`<style>`, markup stays byte-for-byte. |
| [`spark-html-language-server`](https://www.npmjs.com/package/spark-html-language-server) | LSP — diagnostics, go-to-definition, prop autocomplete, hover docs. |

## License

MIT © Wilkin Novo

---
_Source: https://npm.io/package/spark-html-motion · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._