# @solid-primitives/transition-group
> Reactive primitives for implementing transition effects in SolidJS
Latest version **1.1.2** (published 2025-06-29) · MIT license · 0 weekly downloads
## Install
```sh
npm install @solid-primitives/transition-group
pnpm add @solid-primitives/transition-group
yarn add @solid-primitives/transition-group
bun add @solid-primitives/transition-group
```
## Health
**Score 55/100 (C)** — status: stable.
Positive: has types; esm support; no vulnerabilities; high maintenance score; high quality score.
Warnings: low downloads.
Negative: stale.
## Facts
| | |
|---|---|
| Version | 1.1.2 |
| Published | 2025-06-29 |
| First published | 2023-02-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM |
| Dependencies | 0 |
| Unpacked size | 23.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1558 |
| Author | Damian Tarnawski |
| Maintainers | davedbase, lexlohr, thetarnav. |
| Keywords | solid, primitives, transition, animation, transition-group |
## Links
- npm: https://www.npmjs.com/package/@solid-primitives/transition-group
- Repository: https://github.com/solidjs-community/solid-primitives
- Homepage: https://primitives.solidjs.community/package/transition-group
- Issues: https://github.com/solidjs-community/solid-primitives/issues
- npm.io page: https://npm.io/package/@solid-primitives/transition-group
## Alternatives
- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads
## Recent versions
- 1.1.2 (latest) — 2025-06-29
- 2.0.0-next.2 (next) — 2026-08-12
- 0.0.1-beta.0 (beta) — 2023-02-27
- 2.0.0-next.1 — 2026-07-18
- 2.0.0-next.0 — 2026-06-26
- 1.1.1 — 2025-04-27
- 1.1.0 — 2025-01-22
- 1.0.5 — 2024-03-05
- 1.0.4 — 2024-01-16
- 1.0.3 — 2023-08-07
- 1.0.2 — 2023-04-20
- 1.0.1 — 2023-03-23
- 1.0.0 — 2023-03-03
- 0.0.1-beta.2 — 2023-03-02
- 0.0.1-beta.1 — 2023-02-27
## README
# @solid-primitives/transition-group
[](https://bundlephobia.com/package/@solid-primitives/transition-group)
[](https://www.npmjs.com/package/@solid-primitives/transition-group)
[](https://github.com/solidjs-community/solid-primitives#contribution-process)
Provides reactive primitives for implementing transition effects on a group of elements, or your own `` and `` components.
- [`createSwitchTransition`](#createswitchtransition) - Create an element transition interface for switching between single elements.
- [`createListTransition`](#createlisttransition) - Create an element list transition interface for changes to the list of elements.
## Installation
```bash
npm install @solid-primitives/transition-group
# or
yarn add @solid-primitives/transition-group
# or
pnpm add @solid-primitives/transition-group
```
## `createSwitchTransition`
Create an element transition interface for switching between single elements.
It can be used to implement own transition effect, or a custom ``-like component.
### How to use it
It will observe the source and return a signal with array of elements to be rendered (current one and exiting ones).
`createSwitchTransition` takes two parameters:
- `source` a signal with the current element. Any nullish value will mean there is no element.
Any object can used as the source, but most likely you will want to use a `HTMLElement` or `SVGElement`.
- `options` transition options:
- `onEnter` - a function to be called when a new element is entering. It receives the element and a callback to be called when the transition is done.
- `onExit` - a function to be called when an exiting element is leaving. It receives the element and a callback to be called when the transition is done.
- `mode` - transition mode. Defaults to `"parallel"`. Other options are `"out-in"` and `"in-out"`.
- `appear` - whether to run the transition on the initial element. Defaults to `false`.
If enabled, the initial element will still be included in the initial render (for SSR), but the transition fill happen when the first client-side effect is run. So to avoid the initial element to be visible, you can set the initial element's style to `display: none` and set it to `display: block` in the `onEnter` callback.
Returns a signal with an array of the current element and exiting previous elements.
```ts
import { createSwitchTransition } from "@solid-primitives/transition-group";
const [el, setEl] = createSignal();
const rendered = createSwitchTransition(el, {
onEnter(el, done) {
// the enter callback is called before the element is inserted into the DOM
// so run the animation in the next animation frame / microtask
queueMicrotask(() => {
/*...*/
});
},
onExit(el, done) {
// the exitting element is kept in the DOM until the done() callback is called
},
});
// change the source to trigger the transition
setEl(refToHtmlElement);
```
### Resolving JSX
Usually the source will be a JSX element, and you will want to resolve it to a DOM element before passing it to `createSwitchTransition`. It leaves the resolving to you, so you can do it in any way you want.
For example, you can `children` helper from `solid-js`, to get the first found HTML element.
```ts
import { children } from "solid-js";
import { createSwitchTransition } from "@solid-primitives/transition-group";
const resolved = children(() => props.children);
const filtered = createMemo(() => resolved.toArray().find(el => el instanceof HTMLElement));
return createSwitchTransition(filtered, {
/*...*/
});
```
Or use a `resolveFirst` helper from `@solid-primitives/refs`
```ts
import { resolveFirst } from "@solid-primitives/refs";
import { createSwitchTransition } from "@solid-primitives/transition-group";
const resolved = resolveFirst(() => props.children);
return createSwitchTransition(resolved, {
/*...*/
});
```
## `createListTransition`
Create an element list transition interface for changes to the list of elements.
It can be used to implement own transition effect, or a custom ``-like component.
### How to use it
It will observe the source and return a signal with array of elements to be rendered (current ones and exiting ones).
`createListTransition` takes two parameters:
- `source` a signal with the current list of elements.
Any object can used as the element, but most likely you will want to use a `HTMLElement` or `SVGElement`.
- `options` transition options:
- `onChange` - a function to be called when the list changes. It receives the list of added elements, removed elements, and moved elements. It also receives a callback to be called when the removed elements are finished animating (they can be removed from the DOM).
- `appear` - whether to run the transition on the initial elements. Defaults to `false`.
If enabled, the initial elements will still be included in the initial render (for SSR), but the transition fill happen when the first client-side effect is run. So to avoid the initial elements to be visible, you can set the initial element's style to `display: none` and set it to `display: block` in the `onChange` callback.
- `exitMethod` - This controls how the elements exit.
- `"remove"` removes the element immediately.
- `"move-to-end"` (default) will move elements which have exited to the end of the array.
- `"keep-index"` will splice them in at their previous index.
Returns a signal with an array of the current elements and exiting previous elements.
```ts
import { createListTransition } from "@solid-primitives/transition-group";
const [els, setEls] = createSignal([]);
const rendered = createListTransition(els, {
onChange({ list, added, removed, unchanged, finishRemoved }) {
// the callback is called before the added elements are inserted into the DOM
// so run the animation in the next animation frame / microtask
queueMicrotask(() => {
/*...*/
});
// the removed elements are kept in the DOM until the finishRemoved() callback is called
finishRemoved(removed);
},
});
// change the source to trigger the transition
setEls([...refsToHTMLElements]);
```
### Resolving JSX
Usually the source will be a JSX Element, and you will want to resolve it to a list of DOM elements before passing it to `createListTransition`. It leaves the resolving to you, so you can do it in any way you want.
For example, you can `children` helper from `solid-js`, and filter out non-HTML elements:
```ts
import { children } from "solid-js";
import { createListTransition } from "@solid-primitives/transition-group";
const resolved = children(() => props.children);
const filtered = createMemo(() => resolved.toArray().filter(el => el instanceof HTMLElement));
return createListTransition(filtered, {
/*...*/
});
```
Or use a `resolveElements` helper from `@solid-primitives/refs`
```ts
import { resolveElements } from "@solid-primitives/refs";
import { createSwitchTransition } from "@solid-primitives/transition-group";
const resolved = resolveElements(() => props.children);
return createListTransition(resolved.toArray, {
/*...*/
});
```
## Demo
[Deployed example](https://primitives.solidjs.community/playground/transition-group) | [Source code](https://github.com/solidjs-community/solid-primitives/tree/main/packages/transition-group/dev)
## Usage references
Packages that use `@solid-primitives/transition-group`:
- [`solid-transition-group`](https://github.com/solidjs-community/solid-transition-group/tree/main/src)
- [`motionone/solid`](https://github.com/motiondivision/motionone/tree/main/packages/solid/src)
## Changelog
See [CHANGELOG.md](./CHANGELOG.md)
---
_Source: https://npm.io/package/@solid-primitives/transition-group · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._