Animated underline, out and in from same side

[IslandScott]

Hi all,

 

i'm trying to create an animated underline for links. I would like the link to start with a line and then on hover the line should disappear to the right and come in from the left. I hope that makes sense, heres what I have so far, any help would be very appreciated.

 

 

Thank you,

 

Scott.

See the Pen WNgBvVM by IslandScott (@IslandScott) on CodePen

[mvaneijgen]

Hi @IslandScott!

 

I've tweaked your pen a bit how I would set it up. When starting out people gravitate to using .fromTo(), but when you've been using GSAP for a while you'll figure out that you hardly need it, because your element is either already at it's end position or start position and thus a simple .from() or .to() while suffice.

 

Also there are a few properties that you are better of not animating, because they aren't really performant on the top of my head these are: width, height, top, bottom, left, right for all these there are transform properties that are just plain better: scale, x, y (and or xPercent, yPercent), so that is how I set up the pen below. scaleX the line to 0 with a transformOrigin. I think I've set the animation to the reverse of what you want, but try playing with the transformOrigin to get it how you want it. I've also commented out the pause, so that it animates on page load, just to easier debug the animation. Hope it helps and happy tweening! 

 

See the Pen PodvZXM?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[IslandScott]

Thank you, I really appreciate that and its very helpful. Il have a play about. 

[IslandScott]

Is there an easy way to make another line come in from the right when hovering, so there always an underline but an 'out and in' kind of animation when hovering. Would I need to use a timeline for that ?

 

Thanks again for the help.

[Rodrigo]

Hi,

 

Maybe you're looking for something like this:

See the Pen QWVRaqL by GreenSock (@GreenSock) on CodePen

 

Is basically the same setup Mitchel did with the extra line element and just a staggered sequence that catches up with the line moving out.

 

Hopefully this helps.

Happy Tweening!

[IslandScott]

Perfect. Thank you very much for that 😀