text rolling hover navigation link animation micro-interaction navigation link hover effect button text micro-interaction menu item emphasis standard text hovers are boring need text transition beyond color change want rolling/sliding text reveal on hover
Rolling Text
Fetch snippet JSON:
curl https://webspire.de/snippets/interactions/rolling-text.json Preview
Background
Customize
Quick Start
<a class="rolling-text"><span data-text="About">About</span></a>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 484 bytes · 29 lines
- Custom Properties
-
--roll-speed - Classes
-
.rolling-text
text rolling hover navigation link animation micro-interaction
Text rolls upward on hover while a duplicate copy slides in from below. Uses ::after with attr(data-text) to create the duplicate without extra markup.
Navigation link
<a href="#" class="rolling-text">
<span data-text="About Us">About Us</span>
</a>Faster roll
<a href="#" class="rolling-text" style="--roll-speed: 0.2s">
<span data-text="Contact">Contact</span>
</a>