celli Posted April 18, 2022 Share Posted April 18, 2022 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 Link to comment Share on other sites More sharing options...
akapowl Posted April 18, 2022 Share Posted April 18, 2022 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 5 Link to comment Share on other sites More sharing options...
celli Posted April 18, 2022 Author Share Posted April 18, 2022 @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 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now