Flip Link — Free HTML CSS JS Per-Letter Hover Snippet

The flip link is the oversized navigation effect on editorial and agency sites: hover a menu item and each letter rolls vertically one after another, the original sliding up and out while a duplicate in an accent color rolls in from below. This snippet builds it with plain HTML, CSS, and a small vanilla JavaScript splitter, using only transforms and a pseudo-element — no duplicated markup per word.

Splitting text into per-letter spans

On load, JavaScript clears each link's text and rewraps every character in its own .fl-char span. Each span stores its index in a --i custom property (for the stagger) and its character in a data-c attribute. Wrapping letters individually is required because the flip animates each one separately — you can't transform parts of a single text node — and the per-letter index is what enables the cascading roll.

The flip with one pseudo-element

Each letter span shows its character normally, and its ::after pseudo-element renders the same character (via content: attr(data-c)) positioned directly below it at top: 100% in the accent color. The span has overflow: hidden on the link, so only the top copy is visible at rest. On hover the span translates up by -100%: the original slides out the top while the ::after duplicate slides into view from the bottom. Because both copies move together inside the clipped link, it reads as a single letter flipping over — and it needs no second copy of the word in the HTML.

The staggered cascade

The signature roll comes from transition-delay: calc(var(--i) * 22ms), so each letter starts its flip 22ms after the previous one. The result is a wave that sweeps across the word left to right rather than every letter flipping at once. This small delay-per-index is the whole trick behind the premium, kinetic feel.

Reversing on exit

To make the effect feel physical, the JavaScript flips the stagger direction on leave: pointerenter sets ascending delays (first letter first), while pointerleave sets descending delays (last letter first). So the word rolls in from the front and rolls back from the end, giving the animation a sense of follow-through instead of simply replaying backward in lockstep.

Spaces handled

Space characters get an explicit width via a [data-c=' '] rule so multi-word links keep their gaps, since an empty inline-block span would otherwise collapse.

Why transforms and a pseudo-element

Using translateY on inline-block spans keeps the animation GPU-friendly and smooth even at the large font sizes these links use. Rendering the incoming letter as a ::after rather than a second DOM node halves the element count and keeps the markup to one clean word per link — the split happens in script.

Customizing it

Change the 22ms step for a faster or slower cascade, swap the accent color of the ::after, adjust the cubic-bezier for a snappier or softer roll, or split on words instead of letters for a chunkier flip. Pair it with a fullscreen menu overlay or a floating pill nav for a complete navigation system.