cycle through 5 groups changing color

[aaron4osu]

I'm trying to figure out how to continuously loop through 5 groups (steps) and changing the the fill color for the spoon, bowl and title one step at a time. For example, step 1 (title, bowl and spoon) would start green, then turn black and step 2 would turn green and so on...  Not really sure where to start on this.  

 

 

Also one issue is that the svg code is a little wonky and not nested properly so some of the stages need different css (see below).  Some use the path and others do not.

 

I have Gsap installed in this codepen.

 

Any help would be greatly appreciated

 

/* step 1 */
#spoon1 path{
  fill:#85ba3a;
}
#title1 path{
  fill:#85ba3a;
}
#bowl1{
  fill:#85ba3a; 
}

/* step 2 */
#spoon2{
  fill:#000;
}
#title2 path{
  fill:#000;
}
#bowl2 path{
  fill:#000; 
}


/* step 3 */
#spoon3{
  fill:#000;
}
#title3 path{
  fill:#000;
}
#bowl3 path{
  fill:#000; 
}


/* step 4 */
#spoon4 path{
  fill:#000;
}
#title4 path{
  fill:#000;
}
#bowl4{
  fill:#000; 
}

/* step 5 */
#spoon5{
  fill:#000;
}
#title5 path{
  fill:#000;
}
#bowl5 path{
  fill:#000; 
}

 

See the Pen NWYBPoX by aaron4osu (@aaron4osu) on CodePen

[Cassie]

Hey there!

SVG elements inherit fill by default from the group they're wrapped in, so you just need to change it on the group. Hope this helps!

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

[aaron4osu]

Thanks Cassie!   That works perfectly... I'm trying to fine tune the traditions between them to slow it down so each one is green for about 1 second and the tradition between them is a bit slower and maybe fades in out between them...  I tried adding ease and duration to the stager... and also played with the duration  in the main function but not sure which controls the transition?

 

 

 

See the Pen oNqMbjO by aaron4osu (@aaron4osu) on CodePen

 

[Cassie]

Here's the docs! Shout if you're still confused 

https://greensock.com/docs/v3/Staggers

[Cassie]

You could also set this up with a timeline, that'll be more flexible!

Here's our getting started guide