Underline Motion

Hover underline text animation

Details

• Center Underline allows you to create polished text hover states with multiple underline animation styles.

• The underline can expand from the center, enter from one side and exit from the other, or start visible and animate out on hover.

• This makes it flexible enough for both subtle interface details and more expressive typographic interactions.

Key Features

• Custom text input

• Extended font controls

• Custom text color

• Custom underline color

• Three animation styles

• Left and right direction control

• Adjustable animation duration

• Multiple easing options

• Adjustable underline height

• Adjustable underline spacing

• Auto-width and auto-height layout support

• Lightweight Framer Motion animation

Animation Styles

• Center

  • The underline expands smoothly from the center on hover.

• Comes In, Goes Out

  • The underline enters from one direction and exits from the opposite direction.

• Goes Out, Comes In

  • The underline starts visible and disappears on hover with directional motion.

---

Property Controls