design-infraReport a problem or share feedback← Catalog
Text states swap
freetransitions/text-states-swap
Swapping the text of a status indicator in place — "Processing…" → "Done", "Save" → "Saved". The old text exits up with blur, the new text enters from below.
$
npx skills add Jakubantalik/transitions.dev # then ask: "apply the text-states-swap transition"- Source
- transitions.dev
- Kind
- transition
- Categories
- transition, text-effect
- Use as
- recipe — technique you apply to your own markup
- Applies to
- buttontext-effect
- Motion
- on state · subtle · css · low cost · respects reduced motion
- Tags
- css
- Licence
- Free for unlimited personal/commercial use in your products; no republishing the collection. Pro (React/TS variants) $9/mo or $149 lifetime.
- Live demo
- transitions.dev
- Docs
- transitions.dev
Similar
Compare all 4 →- Rolling text buttonmotion/rolling-text-buttonButton whose label rolls to a new word on hover/click — a free alternative to Motion+ text components. Free example (motion is MIT); copy and adapt the source from the example page.
- Staggered Letter Text Swapmicrokit/staggered-letter-text-swapEach letter rolls up and is replaced by its twin with a 34ms stagger on hover/focus-visible — pure CSS transitions via a --letter-delay var; the button carries aria-label and the letter spans are aria-hidden; motion-reduce handled. Remove the hard-coded font-[Arial] and light-dark() text colour so it inherits your type and tokens. Nav links and text CTAs.
- Scroll word revealmotion/text-scroll-word-revealWords light up as you scroll through a paragraph — the classic manifesto/hero statement reveal. Free example (motion is MIT); copy and adapt the source from the example page.