CSSPlugin with multiple Pseudo Elements

[celli]

Hi,

 

I have a loop with hover animations happening in each element, which all works except for my pseudo element with is selected using CSSPlugin. I can animate a single pseudo element, but when I put it into a loop (for multiple elements), it doesn't seem like I can select each of them. Is there a special way to use the CSSPlugin in this instance?

See the Pen RwLNazp by celli (@celli) on CodePen

[akapowl]

Hello @celli

 

If you were going to do this with the CSSRulePlugin, things might become rather complicated -  I think you would have to first create a specific rule targetting every specific container in CSS and then in the loop for every of those containers get its specific rule then. With many containers / pseudo-elements that might end in a lot of code/enumaration.

 

As the docs for the CSSRulePlugin already hint to up top, it is a lot easier getting this done with the use of CSS variables.

 

Maybe something like this. Would that work for you?

 

See the Pen yLpGzxG by akapowl (@akapowl) on CodePen

 

 

 

Edit:

Of course, it would be even easier if you could use regular elements, like maybe spans instead of those pseudo-elements.

 

But if you can not compromise on any of it, here's how it would look with pseudo-elements and the CSSRulePlugin. Better don't take a look at the CSS  

 

See the Pen yLpGPpL by akapowl (@akapowl) on CodePen

[celli]

@akapowl yes I see, thank you. I changed my original pen to change the background-color instead using CSS Variables. Works nicely! I appreciate you calling out the hint box on the CSSPlugin page, I will read up and start using CSS Variables