remopini Posted May 21, 2021 Share Posted May 21, 2021 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 Link to comment Share on other sites More sharing options...
Solution OSUblake Posted May 21, 2021 Solution Share Posted May 21, 2021 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 4 Link to comment Share on other sites More sharing options...
remopini Posted May 21, 2021 Author Share Posted May 21, 2021 damn, I was hoping to be able to keep the svg and the script as independent as possible. But thanks for the quick help! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now