How can I create a hover animation with a moving wavy line underneath links in Webflow?

Published on
September 22, 2023

To create a hover animation with a moving wavy line underneath links in Webflow, you can follow these steps:

  1. Create a new Webflow project or open an existing one.
  2. Create a new section or open the section where you want to add the links with the hover animation.
  3. Add a div block element within the section to contain the links.
  4. Style the div block to your liking, such as setting the background color and padding.
  5. Inside the div block, add a link element for each link you want to have the hover animation.
  6. Style the links as desired, such as setting the font size, color, and padding.
  7. Select the div block element and go to the "Settings" panel on the right-hand side of the Webflow interface.
  8. Under the "Transform" section, click on the "+" icon to add a new transform.
  9. Select "Scale" from the transform options and set the scale value to 0.
  10. Next, click on the "+" icon again to add another transform.
  11. Select "Scale" once more, but this time set the scale value to 1.
  12. Now, click on the "Add keyframe" button next to the transform options.
  13. Move the playhead to the desired duration of the hover animation (e.g., 0.3 seconds).
  14. Adjust the scale value to create the desired wavy effect (e.g., 1.2).
  15. Repeat steps 12 to 14 for each link that needs the hover animation.
  16. To add the moving effect, go to the first keyframe of each link's transform in the "Transform" settings.
  17. Click on the "Add keyframe" button for the "X Position" option.
  18. Move the playhead to the desired duration of the moving effect (e.g., 0.3 seconds).
  19. Adjust the X position value to move the line horizontally (e.g., 20px).
  20. Repeat steps 17 to 19 for each link that needs the moving effect.
  21. Preview your site to see the hover animation with the moving wavy line.

By following these steps, you will be able to create a hover animation with a moving wavy line underneath links in Webflow. The animation will add a visually appealing and engaging element to your website, enhancing the overall user experience.

Additional Questions:

  1. How do I create a hover animation in Webflow?
  2. Can I create custom animations in Webflow?
  3. What other effects can I add to links in Webflow?