Stagger not working with Class Variable

[designedaudio]

I'm having a problem using a class variable not staggering in a <ul> of items. I don't want the highlight boxes to appear at the same time.
I stripped down my project to just this feature. What's missing is the forEach() function that loops though the list items and applies a pseudo class. The pseudo class puts a box that covers the lines of text and animates its width: 0% to 100%. The css width is that class variable. var(--fillwidth)

Am I going about this wrong or am I missing something?

Thanks in advanced!

 

p.s. Here is the original tween element

tl.from( ("html", toolList), {"--fillwidth" : "100%", duration: 0.25, ease: "power3.out", stagger: 0.125 }) 

 

 

See the Pen ZEmyRpY by designedaudio (@designedaudio) on CodePen

[darkus]

It seems like you are running it on the entire .container container so its going to look at them all as one piece.

 

I think you have to select for each .bar

 

See the Pen poQwOJL by darkuss (@darkuss) on CodePen