DrawSVG works unexpected

[chenxin]

In this codepen, I have two lines.

 

The animation I want:

initial state: line1 and line2 hidden.

stage one: line1 expand from the center to its ends, and then reverse this animation.

stage two: line2 expand from the center to its ends, and then reverse this animation.

and repeat these two stages infinitely.

 

Now the problem is: at the start of the animation, when line1 is expanding, line2 is already shown.

 

See the Pen QRWVgQ by chenxinnn (@chenxinnn) on CodePen

[GreenSock]

This looks like an immediateRender logic thing. By default, immediateRender is true for from() and fromTo() methods. See https://greensock.com/immediateRender 

 

Try just adding immediateRender:false to your second tween of each element: 

const tl = new TimelineMax({repeat: -1});
tl.fromTo(".line1", 1, {drawSVG: "50% 50%"}, {drawSVG: "100%"});
tl.fromTo(".line1", 1, {drawSVG: "100%"}, {drawSVG: "50% 50%", immediateRender:false});
tl.fromTo(".line2", 1, {drawSVG: "50% 50%"}, {drawSVG: "100%"});
tl.fromTo(".line2", 1, {drawSVG: "100%"}, {drawSVG: "50% 50%", immediateRender:false});

 

Or, if you want to simplify your code, you could do this: 

TweenMax.set(".line1, .line2", {drawSVG:"50% 50%"});
const tl = new TimelineMax({repeat: -1});
tl.to(".line1", 1, {drawSVG: "100%", yoyo:true, repeat:1})
  .to(".line2", 1, {drawSVG: "100%", yoyo:true, repeat:1});

 

Does that help? 

[mikel]

Hi @chenxin,

 

the reason could be 'stroke-linecap:square;'. Without ...

 

See the Pen zQYyvM by mikeK (@mikeK) on CodePen

 

see here

 

 

Happy tweening ...

Mikel

 

 

'

[GreenSock]

Ah yes, perhaps I misunderstood the question. The stroke-linecap:square would definitely cause it to be visible even when the line technically has no width. Good call, @mikel

[chenxin]

Hi GreenSock and mikel, thank you for your answer!

 

Combine the suggestions given by both of you, now the animation looks perfect! 

[PointC]

If you do want to use a linecap and start from the middle, we have a thread about that same topic here:

Happy tweening.