is there an easier way to do this animation?

[iammarkmulvey]

There's got to be an easier way to do this rather than animating in each poly path?

See the Pen wdRpEK by markmulvey (@markmulvey) on CodePen.

[PointC]

I'd look at using stagger for something like that with a .01 offset (instead of the delays you currently have). I don't have time to fork your pen at the moment, but here's some info on stagger.

 

https://greensock.com/docs/#/HTML5/GSAP/TweenMax/staggerFrom/

 

With stagger, you can do that whole animation with one tween.

 

Happy tweening.

[Shaun Gorneau]

I think something like this could work for you. Note ... I had to reorder your polygons in the DOM so that they would animate in order.

 

See the Pen XRoVOE?editors=0110 by sgorneau (@sgorneau) on CodePen.

 

[iammarkmulvey]

Thank you guys. Another question. Is there a more efficient way to define which # Grayline I want to change the gray color to green?

 

See the Pen wdRpEK by markmulvey (@markmulvey) on CodePen.

 

[mikel]

Hi iammarkmulvey,  

 

Just use the class of all the lines ...

 

 

See the Pen BRMBrW by mikeK (@mikeK) on CodePen.

 

[iammarkmulvey]

Sorry didn't explain that well. I only want to change the color of some of the lines (from bottom to top) and is there a simpler way to target which lines for example GrayLine_38 thru GrayLine_01, or GrayLine_38 thru GrayLine_10, rather than what I did.

 

Thanks!

[mikel]

Hi iammarkmulvey,  

 

If You give the specific lines a certain class-name you could use the staggerTo or a set Tween.

[Shaun Gorneau]

Something like this would work

 

See the Pen vmbYGx?editors=0011 by sgorneau (@sgorneau) on CodePen.

 

Edit: Just as mikel suggested ... I put a class on the green lines that should be "on" via the staggerTo.

Edited May 23, 2017 by Shaun Gorneau
Further info

[mikel]

 

... and if the changing should start from bottom  bear in mind to reverse this sequence / array

 

See the Pen EmrxoP by mikeK (@mikeK) on CodePen.

 

[PointC]

Looks like @mikel & @Shaun Gorneau have you pretty well covered on how to do this animation by  adding some classes, but I thought I'd throw out another suggestion so you'll have some options. If you want to animate part of the array and it's sequential, loops are great for that type of work. Instead of using a stagger tween, you can loop through the part of the target array that you want to animate and use the variable from your loop count to create a delay for each tween. You could also use this method to create new tweens and add them to a master timeline. Here's a really basic example of how that works.

 

See the Pen GmzRNM by PointC (@PointC) on CodePen.

 

Using this method, you wouldn't have to add a new class to your elements. As I mentioned though, the elements need to be sequential for this to be a good option. I find  the majority of my SVG animation work really involves asset prep and planning. If you've got elements semantically ID'd , in the right order and grouped correctly coming out of your vector software, the actual tweening is much easier.

 

Hopefully that helps a little bit.

 

Happy tweening.

[iammarkmulvey]

Again thank you all but BINGO Craig.

 

Was looking for an easier way to target part of the gray lines (an array).  0 thru 8   or  3 thru 5, etc.