Drawing border around square from the middle of the bottom

[Leftfield]

HI All, I am quite new at this, please help.

I want to draw a border from the bottom of square, so it goes from the half of the square simultaneously to the left and right side, joining at the top.
To be more clear: In the middle of the bottom lines starts - two lines going to the left and right side, joining at the top middle.

Sorry fox, after few hours of trying, I am getting funny results but not even close.

[GreenSock]

Welcome to the forums, @Leftfield. 

 

You'd need to adjust your SVG artwork so that the rectangle is a <path> that's has its origin in the top center (or use two <path> elements, one for each side of the rectangle). Do you have a demo we can peek at? Perhaps a codepen? It'd really help to see our artwork so that we can deliver the proper <path> data. 

[GreenSock]

Here's an example: 

See the Pen f3a7243251db53aa2ce58a551fb0fd17?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Is that what you're looking for? 

 

[Leftfield]

Mate, THANK YOU!!!!

[Leftfield]

@GreenSock

I saw wonderful border effects on this site: https://rumulti.com/

[GreenSock]

Very nice. So do you have what you need now? I just wanted to confirm. 

[Leftfield]

Regarding question, YES! Thank You!

Any idea why it doesn't work on localhost? Set .htaccess and config.php on Apache.
Haven't tried online. PS: Do I have to open new topic?

[GreenSock]

It would definitely help to start a new topic, yes. 

 

I'm not sure what you mean by "doesn't work". Are you getting a specific error? Are you getting redirected somewhere? Are you trying to use the codepen-specific DrawSVGPlugin file locally? If so, that won't work; DrawSVGPlugin is a membership benefit of Club GreenSock. When you join, you can download a zip with files that can be run ANYWHERE (no restrictions whatsoever). The demos we do on codepen use a special version of the plugin that only works with that domain (codepen.io). Does that answer your question? 

[Leftfield]

I saw in DrawSVG it calls TweenLite, TBH for me is very important speed of the site. If I need 3+ files just for this effect, I am not gonna buy a membership. It's fantastic but...

[GreenSock]

Well, you can just use TweenMax and DrawSVGPlugin (2 files). And TweenMax is used on over 4,000,000 sites and is very widely cached from the CDN, so speed really shouldn't be an issue. 

 

Let us know if you need anything else at all. Enjoy!

[Newbie]

I am very new to svg. I am looking for the exact same animation, but instead of starting at the bottom middle, i need from top middle and joining at the bottom middle. Thanks!

[PointC]

Hi @Newbie,

 

Just add this before the animation and you'll be good to go:

 

TweenMax.set("#path", {rotation:180, transformOrigin:"center center"});

 

Happy tweening.

[Newbie]

Thank you!

[altos]

Is it easy to get rounded corners on all four sides of that path element?

[ZachSaucier]

@altos You can do it if you modify the path values to use arcs in the corners instead of straight lines. I'd recommend a vector editor like Illustrator or Inkscape to do that if you're not experienced doing it by hand though. 

[altos]

@ZachSaucier thanks for the quick reply. I was originally hoping to prevent the design team from needing to jump in, but manually building out the path seems a bit tricky.

[Jay Wilson Jr.]

Is it possible to make this animation responsive? 

This is exactly what I am trying to accomplish, it just needs to respond to the browser width. 

[ZachSaucier]

46 minutes ago, Jay Wilson Jr. said:

Is it possible to make this animation responsive? 
This is exactly what I am trying to accomplish, it just needs to respond to the browser width. 

It already is responsive...? 

[doc4255]

How would you animate the box from the top in the middle to the bottom middle, basically the reverse of the above example

[PointC]

You'd want to rotate the path 180 like this.

gsap.set("#path", {rotation:180, transformOrigin:"center center"})

Happy tweening.

[doc4255]

Thanks. much appreciated

[Chromium]

I am kindda new to SVG stroke animations and I was hoping that this particular animation can be customized via JS to start from a little to the right of the bottom left corner of the square (see pointed location in the image below).

 

I was hoping that that can be done simply via changing the "50% 50%" part of the drawSVG: "50% 50%". I've tried to modify the values in this CodePen but I'm not sure I understand how the drawSVG percentages work:

See the Pen bGLgoPO by fuad-zeyad-tareq (@fuad-zeyad-tareq) on CodePen

 

To be clear, I'd still like the exact same animation (i.e. the borders are drawn from both directions of the origin point), just that the origin point be in a different location. Am I wrong in assuming that it can be done via the drawSVG percentages?

[mvaneijgen]

Is something like this what you are looking for? I used a `.fromTo()` animation to animate from and to a specific points on the path.

 

The whole line is 100%, so you can play with the starter position by using numbers between 0% and 100%. In this demo I moved the end position to the top right position by using a higher value then 100% 

 

 

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