Animating Dynamic CSS variables

[elegantseagulls]

Is it possible to animate index-based "dynamic" CSS Vars? I'm tying to access the vars in a loop based on index, but GSAP is telling me it's an invalid property... Is there any way around this? I'd like to do it this way (css vars) as there will be many objects and several containers I'd like to animate with the least amount of overhead.

 

See the Pen LYxMyee?editors=1111 by elegantseagulls (@elegantseagulls) on CodePen

[OSUblake]

Do you mean like this?

See the Pen 3dd173c4c827fa0a33bea4aaa8e686a2 by osublake (@osublake) on CodePen

 

[OSUblake]

Reference - computed property names

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#computed_property_names

 

[elegantseagulls]

Nailed it! Thanks for the reference too. My brain was in an infinite loop.