SVG animate corners to target div

[bparticle]

I am trying to animate the corners of a rectangle SVG from the centerpoint of a div, one by one to eventually take the exact shape of that target div. I have invested quite some time in this already before I realized that the points of an SVG can't be positioned in an absolute way, in the same way an HTML element can, or a canvas object maybe. Is this effect doable? In the attached CodePen I am just trying to get from the center of the target to the end in one go, and was planning to add the substeps later on. As you can see, it doesn't work.

 

The rationale was to grab the center point of the target, and put the four corners in four arrays that I can pass to the SVG (topLeft, topRight, etc.). Then animate from the center point, to those four corners. The center point seems to work well, but the other points are not responding as they should.

 

The idea is to eventually build a dynamic system with multiple clickable links that will open up these animations, like a fold-open modal window.

See the Pen MQXpKg by bparticle (@bparticle) on CodePen

[Sahil]

Not exactly sure what final effect you are trying to achieve. If it is just for single div, then you need your svg to have height and width same as your div. If you are trying to use SVG as background on multiple divs then you need to do slightly more calculations to calculate distance between svg x,y and div x,y coordinates.

 

If you are planning to use some kind of background and use these polygons as clipping path then you need to do some additional math to convert viewport coordinates into screen coordinates. (if you are going to use viewbox attribute on your svg);

 

See the Pen PQaJgz?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

[bparticle]

Great CodePen you cooked up, thanks!! This helps me a lot.

 

The idea is to use this effect as a global behavior for opening modal windows on a page. So the target div is actually the modal window that will be hidden while the opening animation runs, after that the contents of the modal will be shown. So the sizes of the modal windows will vary, and that's why I need a dynamic way of using the svg's. I see you have hard coded the size of the svg to the size of the target div. Any chance this can be done programatically?

[Sahil]

Ya you just need to update svg's dimensions and position as per the div and rest of calculation can remain same. Mostly depends on how you are going to set up your elements but should be easy.

 

EDIT: @bparticle I have updated demo.

[Sahil]

@bparticle What I had suggested might not be good idea. It will cause you a lot of trouble to make it responsive.

 

I went ahead and tried different approach, this solution is a lot cleaner and responsive out of box. What I have done is really good solution in my opinion but if you want to get best performance then you might want to switch to canvas. To optimize further, you can also remove ticker event when your timeline completes and just call the drawPoly function manually on resize.

 

If anybody else has better solution please respond.

 

See the Pen eVKLbd?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

[Carl]

Great demos, Sahil!

[bparticle]

@Sahil This is great stuff. I have based my code on your demos and it's looking great! 

 

I made a new CodePen to illustrate what effect I was looking for specifically @Sahil Your latest code suggestions made it very easy to attain the appearance of a div "folding open", since it's based on percentages of the target div width and height. Very flexible and very stable. Thanks once again.

 

See the Pen gvKNWg by bparticle (@bparticle) on CodePen

 

Edited February 22, 2018 by bparticle
Added CodePen and additional information

[Sahil]

@bparticle That looks really cool, as if it is grabbing all around like octopus to get closer. And yes the previous demo was mess, glad second demo made it easy for you.