How can I show an underline animation on a header when hovering over a link block in Webflow?

Published on

September 22, 2023

Note

CommunityFAQ is not affiliated with Webflow. Click here if you'd like to visit Webflow's help resources.

To create an underline animation on a header when hovering over a link block in Webflow, you can follow these steps:

Select your header element: Identify the header element in which you want to create the underline animation. This could be a heading element (H1, H2, etc.) or a paragraph element.
Convert the header element to a link block: Right-click on the header element and select "Link Block" from the "Wrap in" dropdown menu. This will convert your header element into a link block.
Create a div for the underline: Inside the link block, create a new div element. This div will be used to create the underline effect.
Style the underline div: Give the underline div a class name and apply the desired styling. This includes setting its width, height, position, and color to match the design of your underline animation.
Set initial state and interaction: With the underline div selected, go to the Interactions panel. Add a new interaction by clicking the "+" button. Set the initial state by specifying the starting position of the underline div.
Add hover trigger: In the Interactions panel, click the "+" button to add a new trigger. Select "Hover" from the dropdown menu and choose the "Over" option. This will activate the interaction when the link block is hovered over.
Create the hover animation: Click on the "Start an animation" button in the Interactions panel to define the hover animation for the underline div. This could be a simple transformation, such as scaling the width or height of the div, or animating its position.
Set interaction settings: Customize the animation duration, easing, and delay according to your preference. You can also set the interaction to repeat or loop for added effect.
Preview and fine-tune: Use the Webflow Preview mode to see how the underline animation looks and feels. Adjust the animation properties as needed to achieve the desired effect.
Publish and enjoy: Once you are satisfied with the underline animation, publish your Webflow project for the changes to take effect on your live site.

By following these steps, you can create an eye-catching underline animation on a header when hovering over a link block in Webflow.

Additional questions:

How do I create a hover effect in Webflow?
Can I apply different animations to different elements in Webflow?
What other types of mouse-triggered animations can I create in Webflow?

How can I create a click interaction in Webflow that shows the unique description of a selected doctor's photo while blurring out the descriptions of the other two doctors in the collection?

Question: Can I target a class with a combo class for specific steps in a Webflow interaction without affecting other blocks?

Is it possible to create a paintbrush stroke animation to underline a word or phrase in Webflow?

How can I fix the issue where the focus jumps to a section in the middle of the page on tablet and mobile views in Webflow?

Can I use Webflow to create a button that, when pressed, can change the background color of a div block from blue to green?

How can I create a slider in Webflow where the focused slide is full opacity and the other slides are faded with reduced opacity?

Can anyone assist with setting up a loader animation in Webflow that only plays the first time someone opens the homepage?

Is there a way to improve the smoothness of the GIF implementation on my home page in Webflow?

What have you done to achieve a clean flip card animation in Webflow and what are the best practices for this?

How can I create a hover effect in Webflow that changes the border radius, shadow opacity, and adds a text overlay to an image and text within a Link block?