How to get my coloured block to animate in first then text

[heavylifting]

As part of the animation below I'm using GSAP cssRule to animate the coloured pseudo element/block across the screen. However because it's tied to the text block I can't get the block to appear first and then revel the text underneath.

(Reason for using cssRule and the pseudo block is that I want to keep my HTML as semantic as possible and not crowd it with unnecessary divs.)

Thanks

See the Pen LYQJwKQ by heavymessing (@heavymessing) on CodePen

[SteveS]

I believe that pseudo-elements are effectively child elements when it comes to styles. You approach would therefore be impossible without some seriously hacky methods. You are much better off adding a div. I guarantee it will be less cluttered than the voodoo that would be required for the effect you are looking for.

[GreenSock]

CSSRulePlugin was created before CSS variables were viable in all major browsers, but now they're quite standardized. Like the docs say, it's almost always better to just animate a CSS variable with GSAP instead of using CSSRulePlugin. 

 

See the Pen PowWgOz by GreenSock (@GreenSock) on CodePen

[heavylifting]

Thanks this has put me on the right track now and this has helped too

See the Pen rNpXXWq by PointC (@PointC) on CodePen