How do I properly animated the dashing per image pseudo selectors?

[Xenex122]

So I have a problem wherein I don't know why the animation pseudo selectors don't work as I expected. 
https://codesandbox.io/s/competent-moon-n1ce1p?file=/src/App.js:2380-2405
Supposingly each images is hided...they will only see once they are hit my scroller-start on the start of trigger images. 
If this works I can do it also with texts. Anyone can help me here? 

 

Anyway the first in 'grid-layout-left'  is supposed to animate the yellow background from 'right to left' ..You can see in the codepen. 
And for the 'grid-layout-right' which is the right side of images supposed to animated the yellow background from 'left  to right'. 
also they supposed to be reanimated when scrolling back..

[GreenSock]

I didn't quite understand your question, but I'd offer a few pieces of advice: 

1. Whenever I see someone using CSSRulePlugin, it's almost always a place that'd be better/easier with CSS variables instead. Remember, GSAP can animate CSS variables, like gsap.to(".selector", {"--your-variable": 100});
2. You'll significantly increase your chances of getting a good answer if you take the time to create a very minimal demo with only the absolutely essential code to show the issue. Just a few colored <div> elements is best. And CodePen is better than CodeSandbox.io because everything is in one place (not multiple files), although it's okay if you need to use CodeSandbox. 

Good luck!

[Xenex122]

oh i see

[PointC]

Here's a demo showing how to animate pseudo elements with CSS variables.

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