Is there a way to animate the border lines of button menus in Webflow, wherein the line appears from left to right as if it's being drawn, instead of just changing the width?
TL;DR
- Create a button with an absolutely positioned inner div as the animated border line, initially set to width or scaleX of 0.
- Use hover interactions in Webflow to animate the inner div’s width or scaleX from 0 to 100% and back, with overflow hidden and easing applied for smooth drawing effect.
You can create an animated border line effect in Webflow that appears to draw from left to right using a combination of div wrappers, hover interactions, and transform or width animations.
1. Structure Your Button with a Border Element
- Create a button using a div or button element.
- Inside the button, add an extra div that will act as the animated border (e.g., bottom border line).
- Set the border div's position to absolute, bottom-aligned inside the button wrapper.
- Set its height to something like 2px and background color to match the desired border color.
- Give the border div an initial width of 0%.
2. Apply Overflow Hidden to the Button Wrapper
- Set the parent button element to position: relative.
- Set overflow: hidden to ensure the animated border does not spill outside.
3. Create the Animation Using Webflow Interactions
- Select the border line div.
- Go to Interactions panel > click ‘+’ next to Hover (hover in and hover out).
- On Hover In, animate the border line’s width from 0% to 100% with an ease-out timing (or ease-in-out for smoother animation).
- On Hover Out, animate the width back from 100% to 0%.
Alternatively, use Transform > Scale X from 0 to 1 for a cleaner approach:
- In initial state: transform-origin: left, scaleX: 0.
- On hover: animate to scaleX: 1.
- On hover out: animate back to scaleX: 0.
4. Adjust Timing for Natural Feel
- For a drawing effect, use a duration between 0.3 to 0.5 seconds.
- Choose easing like ease-out for a smoother tail at the end of the animation.
Summary
To animate a border line from left to right in Webflow, create a separate inner div element as the border, animate its width or scaleX using hover interactions, and use absolute positioning and overflow hidden to keep the effect clean. This method creates a smooth "drawing" effect without merely snapping the width into place.