Text Roll Hover

How it behaves

• Lit faces. As a letter turns, the outgoing face falls into shadow toward its edge and the incoming face catches a glint of light just before it lands flat. A flat face is always exactly its own colour, so contrast at rest is unchanged. Roll, flip and fold are lit; the other presets are not.
• Speed-sensitive spin. How fast the pointer arrives sets the turn. A slow hover gives one gentle quarter turn; a quick flick overspins past flat (never more than 1.3 quarter turns) and settles back onto the second face. Keyboard focus always uses the gentle turn.
• Ripple to the neighbours. In a group of links, hovering one tips the letters of the two links either side a few degrees toward the turn, fading with distance, and they settle flat again. A sweep along a nav reads as a wave. A link that is not hovered never fully rolls.
• Press. A click spins the label once round (about 0.35s) and then follows the link. Navigation waits only for that spin; Cmd, Ctrl, Shift and Alt clicks and middle clicks are left to the browser.
• Current page. A link with aria-current="page" rests on its second face, and hovering it rolls back to the label and forth again the other way.

Presets

Set data-tr-preset on the element. Every preset staggers from the side the pointer came in, can be reversed mid-way, and settles exactly flat.

Notes:

• wave keeps one face. It ignores data-tr-alt and data-tr-light, and leaving the link sends a smaller wave back from the exit side. Use it for links whose label should never change.
• slide and split follow the direction of travel. Coming in from the left pushes the letters right; leaving through the far side keeps them moving the same way, and leaving back through the side you came in reverses them. A turn interrupted part way retraces its path.
• spin shows the back of the coin mirrored while it turns, and its press turns the face that is showing once round without swapping.
• Only roll, flip and fold are lit. data-tr-light does nothing on the others.
• Reduced motion is the same short fade for every preset (see Accessibility).

Quick Start

1. Add to your HTML <head>:

Code snippet omitted: it ships with the download.

2. Add before the closing </body> tag:

Code snippet omitted: it ships with the download.

3. Add data-tr to any link, button label or heading link in your <body>:

Code snippet omitted: it ships with the download.

Every [data-tr] element on the page is set up when the script loads.

Using It With Your Own Design

What the effect needs from your markup: an element with data-tr whose content is the label text. Put it on the link itself, or on a <span> inside a link or button when the control also holds an icon: the roll is triggered by the nearest link or button around it, so hovering anywhere on the button rolls the label. Keep icons outside the data-tr element, since everything inside it is split into letters.

What is only the demo's styling: everything below the "Demo page" line in style.css (the specimen stage: link row, pill button, large heading, fonts and palette) and the preset switcher block at the end of script.js. Delete them freely.

Groups for the ripple: links inside the same nav, menu, ul, ol or [role="navigation"]/[role="menubar"] ripple into each other in document order. Put data-tr-group on any other wrapper to make its links a group, for example a row of footer links in a div. A single link, or links in running text, are not grouped.

Client-side routers: the press spin holds a plain left click for about 0.35s and then follows the link with a normal page load. If your site navigates with a client-side router, set data-tr-press="off" on its links so the router keeps control of the click. A click another script has already cancelled is never followed.

CSS the effect depends on: the rules above the "Demo page" line. .tr-stack and .tr-face stack both faces in one grid cell so the element is as wide as the longer label (split draws each face twice, as .tr-face--upper and .tr-face--lower, cut apart only while letters move); .tr-word, .tr-char and .tr-char-mask must stay inline-block, because transforms and masks do nothing on inline boxes; backface-visibility: hidden keeps the waiting face invisible; .tr-sr is the visually hidden label copy and must stay hidden visually but not with display: none. Letters rise a little above the line while they turn (and fold reaches a little below it): give large headings room, or clip the turn to the line box as the demo's large heading does. Set --tr-accent on any ancestor to recolour the second face, for example on a dark button. The lighting mixes each face toward --tr-light and --tr-shadow while it turns, so it works on light and dark grounds alike; on a coloured ground you can point --tr-shadow at a deep shade of that colour.

Choosing a typeface

Splitting text into letters drops kerning pairs and ligatures, so the stylesheet turns them off on [data-tr] from the start and nothing shifts when the split lands. Grotesques and geometric sans faces with modest kerning (Mona Sans, Inter, Helvetica-style faces) look identical either way and suit the effect at every size. Script faces, connected lettering and display serifs that rely on tight kerning pairs or ligatures (such as "fi" or "ffl") will look looser once split: check them at your largest size before using them.

Options

The link for the current page needs no option: give it aria-current="page", as you would for screen readers anyway.

Accessibility

• Screen readers hear the label once. Each element gets a visually hidden copy of its original text, and the split letters and the second face are hidden from assistive technology, so the accessible name comes from the content and matches the visible label (voice control users can say what they see). An alternate label is visual only.
• Keyboard: focusing a link or button with the keyboard rolls it like a slow hover (and nudges its neighbours), and moving focus away rolls it back. Enter plays the press spin before the link is followed. A mouse click does not leave it rolled after the pointer leaves.
• Touch: there is no hover state to get stuck. A tap plays one roll (not the press spin), starting from the side you tapped, and then follows the link. Links that open in a new tab or carry download are followed immediately and still roll.
• Reduced motion: with prefers-reduced-motion: reduce nothing turns, slides, tips or spins in any preset, and links are followed at once; the second face fades in over the label in the accent colour (or, on the current page's link, the label fades back in). On wave this is a fade to the accent colour. Changing the setting while the page is open rebuilds every label.
• No JavaScript, or GSAP blocked: the links are left exactly as written.

Dependencies

Required:

• GSAP 3.13+ (the demo is pinned to 3.15.0)
• SplitText plugin (free with GSAP since 3.13)