Swap with motion: the old content is lifted out and fades fast while the new one rises or pops in on a spring, and whatever is around glides to the new size.
$ pnpm dlx shadcn@latest add @dashral/motion-swapInstallation
$ pnpm dlx shadcn@latest add @dashral/motion-swapAdds components/dashral/motion/swap.tsx, the Swap it builds on (in components/dashral/), motion and the motion files every motion component shares. Or by its full URL: https://dashral.com/r/motion-swap.json
Usage
The same as Swap, imported from components/dashral/motion/ (with the npm package: @dashral/motion/components/swap): swap the import and it moves.
import { Swap } from "@/components/dashral/motion/swap"
<Swap value={copied} effect="pop">
{copied ? <Check /> : <Copy />}
</Swap>Compared with Default
The old content fades out in CSS while the new one arrives in the same place.
Motion
The old content is lifted out of the layout as the new one arrives (a pop on a spring), so what's around glides to the new size at once.
How the two editions differ in general, and which to use where: Motion.
API reference
Every prop of Swap, and every attribute of the element it renders. The Motion edition adds no props of its own.
Swap
| Prop | Type | Default |
|---|---|---|
value | string | number | booleanRequired. What it shows now, as a key: a change swaps the old content out and the new one in. | — |
children | ReactNodeThe content for this value. | — |
effect | "fade" | "rise" | "pop"How the new content arrives: fading, rising a few pixels (text, forms) or popping in from small (an icon such as a check). | "fade" |
wait | booleanThe old content leaves before the new one comes, rather than both at once. | false |
appear | booleanThe first content arrives with the effect too, as it's added. | false |
as | "span" | "div"The element: span inside a line or a button, div for blocks. | "span" |
className | stringClasses of each content's own element, e.g. its layout. | — |
Motion
- The old content is lifted out of the layout and fades fast (--duration-fast); the new one rises (--duration-standard, --ease-enter) or pops in on a spring with a small overshoot.
- wait lets the old one leave first; with reduced motion they only cross-fade.