Draw Stroke, Then Fill

[benjino]

I'm trying to draw the stroke, then fill the shapes. What am I missing here?

See the Pen PKJORa by benjino (@benjino) on CodePen.

[Carl]

Thanks for the demo. The main problem is that setting the opacity of the group to 0 also hides the paths you are trying to reveal with DrawSVG.

Instead of animating the opacity of the group, try animating the fill of the paths.

 

I removed the repeats and simplified the syntax just to illustrate how to animate the fills.

 

See the Pen XaeYBo by GreenSock (@GreenSock) on CodePen.

 

[benjino]

Alright, thanks. I see what I wasn't getting. I did try {fill:none},{fill:black}. I forgot to put quotes around values.

 

Thanks for clueing me in on this!