Why not use the real text underline?

Use it in body copy, where a link has to be visible before anyone hovers. This is for nav and title lists, where position already says what is clickable.

Which direction should it leave?

From the right. Switching the transform origin on leave is what makes it read as one rule rather than two.

About 350 milliseconds in, 300 out. Slower and the pointer has already moved on.

Text underline

A rule that draws in from the left on hover, then leaves from the right.

TextBuild difficulty: EasyscaleX

Also called Hover underline, Draw rule.

Here it is working.

Motion notes

Hover the line. The rule comes in from the left.

For designers

The rule is the whole event, so it has to be exact: 1px, sitting at the same offset as the underline it replaces, drawing in from the left in about 350 milliseconds. Sending it out from the right on leave is the detail people feel without naming. Keep the real underline in body copy, because a link inside a paragraph has to be visible before anyone hovers it. This belongs on nav and on lists of titles, where position already says what is clickable. Run the same tween on focus-visible, or a keyboard user gets nothing. On reduced motion, show and hide the rule with no tween.

Use this when

A text link that should feel considered
Nav or a list of titles
One line. The rule is the whole event

Reach for something else when

A filled button. Use Background fill button.
A scramble on hover. Use Dual scramble.
Every paragraph link. One treatment per view.

How to build it

A 1px rule under the word. scaleX from 0, origin left on enter. On leave, origin right so it exits the other way. Reduced motion: show or hide with no tween.

Official GSAP

gsap.to scaleX.

gsap.to(rule, { scaleX: 1, transformOrigin: 'left center', duration: 0.35, ease: 'power2.out' });

Every plugin ships in the public GSAP package. Nothing here is copied from a paid pack.

Common questions

Why not use the real text underline?: Use it in body copy, where a link has to be visible before anyone hovers. This is for nav and title lists, where position already says what is clickable.
Does it need a keyboard state?: Yes. Run the same tween on focus-visible, or a keyboard user gets no feedback at all.
Which direction should it leave?: From the right. Switching the transform origin on leave is what makes it read as one rule rather than two.
How fast?: About 350 milliseconds in, 300 out. Slower and the pointer has already moved on.
What does reduced motion do?: Show and hide the rule with no tween.

Save as skill

A SKILL.md for this one animation: what it is, the official docs link, and a copy-paste block with the reduced-motion branch already in it. Copy gives you the same words.

Use this with your AI

Save the skill, drop it into Cursor, Claude, or whatever you use, and ask for this motion. That is all. The skill tells the agent to open this page, watch the working demo, and match it.

Last reviewed 26 AUG 2026

Next: Counter