Undrawing a line

[storylines]

Another rookie question that I need help with:

 

I have two segments, circle1 and circle2. The intention is for circle1 to remain hidden until circle2 has finished animating. My assumption was that I could do this by setting the start and end of the segment for circle1 to 0% 0%, which would make circle1 'undrawn'. Unfortunately, it's not working as planned and I need help in understanding why. 

 

I'm attaching a screen grab of the code.

[OSUblake]

Hi @storylines

 

I think the problem is with your fromTo tween. Please watch the video here to understand.

https://greensock.com/immediateRender

 

And next time you have a question, it would be better if you can make a demo.

 

You can use all the member plugins on CodePen.

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

 

 

 

 

 

[OSUblake]

I noticed another problem. Element ids must be unique. You are using the circle1 and circle2 id twice.

<g id="circle1">
  <circle id="circle1" fill="none" stroke="#fff" stroke-width="4" cx="121.1" cy="149.6" r="53.3" />
</g>
<g id="circle2">
  <circle id="circle2" fill="none" stroke="#fff" stroke-width="4" cx="282.1" cy="150.6" r="53.3" />
</g>

 

Here's a demo of it working. You can fork it next time you have a question.

 

Notice the immediateRender property on the last fromTo tween. That's what the video I linked to will explain.

 

See the Pen BmNQYd by osublake (@osublake) on CodePen

 

[storylines]

Cheers Blake, really appreciate your help.