Draw svg

[Stagnax]

Hello,

I'm trying to use DrawSVG for the external border .

As you can see I have 4 blocks that appear one by one .

What I'd like to do is : 

As soon as the first block appears a border should start and complete its path as the last block appears

 

I hope I'm clear what I want 

See the Pen yvZRJE by stagnax (@stagnax) on CodePen.

[Carl]

Thank you for the nice demo.

 

The main problem was that you gave your SVG an id of border but you really want a <rect> inside the SVG to have that ID so that DrawSVG can animate it.

 

 

var tl = new TimelineMax();
 tl.add("reveal");
 tl.to("#lay1",2,{opacity:1 });
 tl.to("#lay2",2,{opacity:1 });
 tl.to("#lay3",2,{opacity:1 });
 tl.to("#lay4",2,{opacity:1 });
//create a tween that has a duration the same as the timeline and put it at a time of 0
 tl.fromTo("#border", tl.duration(), {drawSVG:0}, {drawSVG:"100%"}, 0);

 

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

 

 

 

[Stagnax]

Thank you Carl

[Stagnax]

One more thing:

what should I do if I want the draw animation to start from a desired coordinate

[Carl]

If you don't like PointA or PointB check out these suggestions from @PointC