How to Create Moving Squiggly Line Links in Webflow

Imagine visiting your favorite news website and finding that all the links have been replaced with moving squiggly lines. You would probably be surprised and confused, and might even consider filing a formal complaint. However, you would also wonder how this effect was achieved. In this tutorial, we will explore how to implement exactly that - creating moving squiggly line links - in Webflow.

Step 1: Creating the Squiggly Lines

To create the moving squiggly lines in Webflow, we first need to generate SVGs. In a perfect world, you would be directed to a squiggly line generator. However, in this imperfect world, we will edit a couple of pre-prepared SVGs. You can access these SVGs by following the link in the video description.

The SVGs provided include one static and one moving version. The static SVG will be used for the rest state, while the moving SVG will be used for the hover state. SVGs are made up of code rather than pixels, so we can recolor them and adjust their speed. This creates the illusion of movement.

Step 2: Editing the SVGs

Start by dragging the static SVG into a design tool like Figma. Then, adjust the color and width as desired.

1. Open Figma and drag the static SVG into the workspace.
2. Change the color and width to your preference.
3. Duplicate the line element to create the moving version.
4. Recolor the moving line to any color you want to use for the hover state.

After making the necessary adjustments, export the static SVG as an .xsvg file and save it. Then, open the moving SVG using a code editor such as Atom. Replace the stroke color with the chosen color and save the SVG.

Step 3: Importing SVGs to Webflow

Now that both SVGs are ready, it's time to bring them into Webflow.

1. Select the edited SVGs and drag them into Webflow's asset manager.

Step 4: Adding the Squiggly Lines to Links

To add the squiggly lines to a link in Webflow, follow these steps:

1. Select the text you want to turn into a squiggly link, such as "award winning."
2. Make the text a link element and name it "Squiggly Link."
3. Scroll down to the background image section.
4. Add the static squiggle as a new background image and adjust the tiling and position.

• Set the tiling to be horizontal and the position to be at the bottom.
• Adjust the size if required.

1. Change the state to hover and replace the background image with the animated squiggle.
2. Adjust the text color to complement the animated squiggle.
3. Test the effect to ensure it looks as intended.

Finally, users can now experience more interactive and visually-engaging links on your website. By following these steps, you can add this fun and attention-grabbing effect to your Webflow projects. Thank you for following along, and feel free to share your thoughts in the comments. If you have any requests for future video tutorials, let us know, and we'll see you in the next one!