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
- Wrap the button in a Div and add 4 absolutely positioned thin Divs for each border side.
- Set initial scale transforms to 0 (X or Y) with appropriate transform origins.
- Create hover interactions to scale each border to 1 with ease-out timing.
- Add reverse animations on hover out to collapse the borders.
- Style border divs to match desired color, thickness, or gradient.
You can create an animation in Webflow where button border lines appear as if they are drawn from left to right by using a combination of border divs, transforms, and Webflow interactions.
1. Wrap the Button with a Custom Structure
- Place your button inside a Div Block (e.g., call it Button Wrapper).
- Create 4 thin Div Blocks (top, right, bottom, left) to serve as animated "borders".
- Position each border div absolutely within the Button Wrapper and assign them to edges.
- Example:
- Top border: height = 2px, width = 100%, top: 0, left: 0
- Right border: width = 2px, height = 100%, top: 0, right: 0
- (Repeat for bottom and left)
2. Prepare the Animation with Initial States
- Set the initial scale of border divs to 0 using a Scale Transform:
- For horizontal lines (top & bottom): use Scale X: 0
- For vertical lines (right & left): use Scale Y: 0
- Adjust the transform origin:
- Top border: origin = left
- Bottom border: origin = right
- Right border: origin = top
- Left border: origin = bottom
3. Create a Webflow Interaction
- Go to Interactions > Element Trigger > Mouse Hover (Hover In).
- For the trigger element, choose Button Wrapper.
- Add an animation:
- Animate each border div to scale back to 1 (i.e., Scale X or Y: 1 depending on direction).
- Set transitions to ease-out and durations around 0.3s to 0.5s.
- Optionally stagger the timing for a more dynamic effect.
4. Add Hover Out Animation
- In the same interaction, add a Hover Out animation.
- Reverse the same scaling transitions to give the effect that the borders vanish or collapse.
5. Style the Borders
- Make the border divs the desired color and thickness to simulate your design.
- You can also use gradients if you want a more dynamic line draw effect.
Summary
To animate borders on a button like they’re being drawn, construct custom border divs, hide them initially using scale transforms, and use Webflow interactions to animate them on hover. This gives you full control over the animation direction and timing.
