Trying to figure out how to draw button border on hover

[rahim]

Hi there!

 

I've been going at this for a while now, so thought i'd ask for some help. ?

 

I'm trying to create a button where the border around it is drawn on hover. I used an SVG since so I there could be a space there for an arrow. I don't have the DrawSVG plugin, so I coded it with plain javascript. I was able to get the animation to work on hover, however the full border remains there before and after the hover. 

 

Is there a way to make this happen using TweenMax without DrawSVG?

 

Thanks for your help!

See the Pen MWWmYZy by rrspence (@rrspence) on CodePen

[mikel]

Hey @rahim,

 

You could try this code of @PointC

 

See the Pen eYYWNLV by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

[rahim]

Oh this is great! Exactly what I was trying to accomplish.

Thanks again @mikel!!

[rahim]

Hi there! 
 

I was able to get the animation to work using the technique above. Thanks for your help with that! 
 

My goal is to have the line to act as a border on a button that runs the animation on hover. However, I’ve only been able to get the animation to run when hovering over the line which is really small, and it ends up animating multiple times anytime the mouse touches that area. 
 

Is there any way to increase the hover area so the animation runs when the mouse touches the whole button?

 

Thanks for your help!

[ZachSaucier]

Hey @rahim. Can you please add an updated demo of your approach that has the issue that you describe?

[OSUblake]

1 hour ago, rahim said:

My goal is to have the line to act as a border on a button that runs the animation on hover. However, I’ve only been able to get the animation to run when hovering over the line which is really small, and it ends up animating multiple times anytime the mouse touches that area. 
 

Is there any way to increase the hover area so the animation runs when the mouse touches the whole button?

 

Put the mouseenter event on the button itself, not the SVG.

[rahim]

Sure! Here's the link to the codepen. (Sorry I couldn't figure out how to embed on a reply)

 

See the Pen GRREqMZ by rrspence (@rrspence) on CodePen

[rahim]

Hey guys,

 

I'm still having sooo much trouble with this. I just don't know what i'm doing wrong! 

 

I'm trying to get the effect above to work on all of the buttons in a page. Tried giving the buttons different class names and creating a separate timeline for each, tried giving them all the same class name then selecting all of them and using a .forEach( ). Still can't get anything to work. Can anyone please explain what's going on here??? I know I'm doing something wrong here, I'm having so much trouble with GSAP! 

 

I've included the codepen below. 

 

Thanks for all of your!

 

See the Pen eYYRMme by rrspence (@rrspence) on CodePen

[OSUblake]

First, you have errors in the console. You should always check that first.

 

Next, read up on these. 

https://developer.mozilla.org/en-US/docs/Web/API/element/querySelector

https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll

https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach

 

See the Pen 5e52e0fec18b84281d51b5c9342cfde4 by osublake (@osublake) on CodePen

 

[rahim]

@OSUblake,

 

Thanks for your help with this! This makes complete sense, and the MDN docs were super helpful. I can totally see where I was going very wrong. 

Much appreciated!