clip-path toggle swap wipe text hover directional transition navigation link with directional text swap button with wipe-reveal alternate text heading with hover text replacement creative portfolio item title swap need directional text swap without translateY want wipe-style transition between two text states need clip-path based text replacement on hover
Clip Path Toggle
Fetch snippet JSON:
curl https://webspire.de/snippets/interactions/clip-path-toggle.json Preview
Background
Customize
Quick Start
<a class="clip-path-toggle" href="#"><span class="clip-path-toggle-text">Default</span><span class="clip-path-toggle-alt">Hover</span></a>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 758 bytes · 36 lines
- Custom Properties
-
--toggle-speed--toggle-ease - Classes
-
.clip-path-toggle.clip-path-toggle-text.clip-path-toggle-alt
clip-path toggle swap wipe text hover directional transition
Default text wipes out to the left via clip-path: inset(0 0 0 100%) while alternate text simultaneously wipes in from the right via clip-path: inset(0 0 0 0). Creates a directional “pass-through” effect. Different from button-text-slide (translateY) and icon-swap (opacity) — this uses pure clip-path for a wipe transition.
Navigation link
<a href="#" class="clip-path-toggle inline-block text-lg font-medium">
<span class="clip-path-toggle-text">Explore</span>
<span class="clip-path-toggle-alt text-indigo-600">Discover →</span>
</a>Button
<button class="clip-path-toggle rounded-lg bg-slate-900 px-6 py-3 text-sm font-semibold text-white">
<span class="clip-path-toggle-text">Learn more</span>
<span class="clip-path-toggle-alt justify-center">See pricing →</span>
</button>