Back to Motion Prompt examples
Landing page & web effects · #14
Underline animation
A link's underline grows from the left on hover. Under the link the cursor is on, an orange line grows from the left; when the cursor leaves, the line shrinks away to the right.
Hover & click interactionsunderlinehoverlinknavigationmenutext-linkscalex
Full motion specification
How the movement works
Use it on menu and text links to show where the pointer is, quietly.
- 01Three links (20 px, bold, 56 apart). The cursor rests on each, left to right, for about 1 s (hit area 6 px wider than the text on each side).
- 02Underline: orange, 3 thick, 8 px below the baseline.
- 03On hover, width 0→100% from the left end over 0.3 s (cubic ease-out).
- 04On leave, the left end moves right over 0.3 s, so the line exits to the right (like scaleX with transform-origin on the right).
Prompt
Add an underline animation to the menu links: grow from the left in 0.3 s on hover, and exit to the right on leave.