Error when trying to add class using .batch()

[riios]

Hello! I just started using Gsap (loving it, thank you for it!) and scrollTrigger. After reading a bit, I figured out how to kinda get the animation I want. After lurking the forums and finding what I think is a solution, I tried going an extra set but can't get it to work. If you see the Codepen, that's the order I want the circles to animate. They are groups and within a group is a line of circles. What I want is for the circles to turn blue in that order. 

 

What I want to know is if I can nest an animation so that all circles inside that group will change color instantly or, what I think could be best, add a class to the groups in that order (autoAlpha so you can see the order) and change circles inside using that class (already in my css). The thing is I keep getting an error about registering my plugin. 

 

Plan B would be to duplicate the circle groups, make them blue and set them behind the gold ones, then set opacity to the gold ones to 0 in this animation. Not really what I would want to do since it'll be more code. 

 

Hopefully somebody can help me as I tried a bunch of different things already! Thank you!!

See the Pen MWeWrEE by riios (@riios) on CodePen.

[ZachSaucier]

Hey riios and welcome to the GreenSock forums. 

 

I'm not really following along with what you're wanting. Do you want something like this?

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

 

Perhaps it'd be easier if you just directly animated the properties you want to change instead of affecting the classes.

[riios]

Hey Zach, thank you for the reply! 

 

What I'm trying to do is the same animation I had (top left to bottom right) with opacity, but make it that the circles change color. Since I didn't know how to animate the circles in the same order I did the groups, I figured it out I could add a class to the groups and with that change the fill and stroke of the circles. 

 

I will fiddle with your Codepen and see if I can figure it out, or maybe you already know how ?

 

Thanks! 

[ZachSaucier]

Ah, so you just want this?

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

[riios]

YES!! Didn't know I had to add a class like that. Could you point me out there in the docs I can read more about this? 

Thank you a ton! 

[ZachSaucier]

Well, in general it's best to use .classList.add() inside of a function or callback or whatever. Since you're staggering things and don't have any other classes to worry about you can use the method I used above. But since the circles are SVG elements you can't just use className, you have to set the class attribute instead. So you need to use GSAP's AttrPlugin that's built into the core.