Button border effect and button fade in issue

[gsapmonkey]

Hi,

 

I have a requirement to do 2 button effects 1 for "Explore newest city" and another for "Services" button.

 

1) The button should be fading in and then text can slide up word by word. The issue I am having is with button fading in. Is the below effect possible with button. The button background should be slowly revealing from bottom to top like in below example.

See the Pen wvWvNGd by eric-chuang (@eric-chuang) on CodePen

 

 

2) The second button effect is the border animation with Services button. First, the border should animate and complete the button and the the text should slide in to the button. I have it semi working but the timing and styling is little off and the border around the button always shows? If I set it to hide, then border animation doesnt seem to work and also border has little gap.

 

Really appreciate if you can help me with some ideas. 

 

Thank you so much!

See the Pen GRLvZJV by codingchefs (@codingchefs) on CodePen

[Rodrigo]

Hi,

 

Sorry but I don't quite follow what's the issue here. For #1 the effect is already done in the first demo isn't it? What exactly are you asking about that? You can explore how to build Clip Path with this tool:

https://bennettfeely.com/clippy/

 

Keep in mind that is better to have all the values in the property with the percentage unit in them even if the value is 0:

gsap.to(element, {
  clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)",
});

As for the second issue your path is drawn incomplete, if you remove all the stroke animations you'll see it,  so that's working the way is supposed to. If you want to remove the border of the buttons just add border: none to the button class:

.button {
  border: none;
}

Also position your SVG so it actually uses the entire area of the button element and position your path inside of it correctly as well.

 

Finally we have the DrawSVG Plugin for things like this:

https://gsap.com/docs/v3/Plugins/DrawSVGPlugin

 

Happy Tweening!

[gsapmonkey]

Thank you so much. That link was useful for me to understand what a clip path is. I am able to fix the first one

See the Pen XWQaERw by codingchefs (@codingchefs) on CodePen

 

For the second issue, is there a codepen/demo that you can point to that animates the border for a button on render using DrawSVG plugin?

 

[Rodrigo]

This is the simplest thing I can think of:

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

 

As you can see is not a lot of effort to get it done. Probably the CSS and other SVG stuff could be a bit more work, but that is not really a GSAP related issue.

 

Hopefully this helps.

Happy Tweening!

[gsapmonkey]

That helps. Thank you so much!