Animating individual items included through svg use

[remopini]

I would like to INDIVIDUALLY animate some bars. If I create those bars with cut-copy-paste, it works fine, but it's a nightmare to manage.

If I define them as a "defs" and then insert them using "use", they seem to become "ganged". I assume that is, because GSAP is actually modifying the underlying base object, not the virtual copies? Is there a way to get to the properties of the instanced copies instead of the base object? I'd like to avoid having to paste them (there are a lot of them).

See the Pen OJppyyV by remo-pini (@remo-pini) on CodePen

[OSUblake]

5 minutes ago, remopini said:

If I define them as a "defs" and then insert them using "use", they seem to become "ganged". I assume that is, because GSAP is actually modifying the underlying base object, not the virtual copies?

 

That's not a GSAP issue. That's how <use> elements work. You really change much internally besides some colors and CSS variables.

 

If you don't like pasting, then let JavaScript do it for you.

 

See the Pen 4deb6be7951e9a8c80cea2746021371f by osublake (@osublake) on CodePen

 

 

 

 

[remopini]

damn, I was hoping to be able to keep the svg and the script as independent as possible. But thanks for the quick help!