Underline on hover animation across multiple lines

Design help Animations & Interactions
1

Hello everyone,

I’m trying to create on hover animation where it goes multiple lines depending the length of the heading. I managed to do it for the top navigation on the homepage but I’m having problem in replicating it for case studies are some the titles go across multiple lines.

Also wondering if there’s a way to set the length of the underline div to automatic depending of the length of the words? Currently I had to adjust them manually.

Here is my public share link: LINK
(how to access public share link)

2

Managed to build it differently. The underlines are going across multiple lines in the case studies - 2 column layout section but I have no control on making them looking like the main nav (Appearing from left to right).

I tried adding gradient transition but based on research there’s a bug on this.

Does anyone have suggestion to resolve this please? Thanks!

https://preview.webflow.com/preview/mammoth-a-design-and-innovation-company?utm_medium=preview_link&utm_source=designer&utm_content=mammoth-a-design-and-innovation-company&preview=5eb250725c7e134e8619684e3586909c&mode=preview

3

Maybe add a screenshot (Hard to understand your issue).

In general the underline related to the text (word/letter scope). For multiple lines, you could add a border (not underline).

image
image1064×577 110 KB

4

Thanks for the suggestion with the border. Do you know if I could adjust distant between the text and border; and create similar interaction as per top section?

I’m trying to achieve this result https://uiflow-multiline-text-hover-animation.webflow.io/

Just to clarify what I’ve done :

  1. Top section: I created the underline using a div block. I set height, background colour and interaction to it. I have full control on how the interaction will look like but it doesn’t work on text across multiple lines.

  2. Bottom section: I built the underline using gradient. By doing this, I still have full control on where the underline sits on the text; it works on text across multiple lines. But I’m not sure if there’s a way to control the interaction. I want the underline to appears from left to right as per the top section.

Thanks!

Recording03
Recording03424×640 3.94 MB

5

I’m curious to this one as well.