Hey forum!
I'm looking for strategies to animate between different SVGs with the same IDs for elements. For example, if I have:
<svg id="svg1">
<circle id="foo" cx="50" cy="50" r="40" stroke="black" stroke-width="3"fill="red" />
<rect id="bar" width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</svg>
and
<svg id="svg2">
<circle id="foo" cx="100" cy="20" r="70" stroke="black" stroke-width="3"fill="red" />
<rect id="bar" width="25" height="1000" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</svg>
is there a way that GSAP can recognize similar elements in the two SVGs and animate between them? I ask this because I am working with a piece of software (GNU LilyPond) that can create SVGs of musical scores with the elements id'd and I'd like to animate between similar scores that have just a few changes (for example, notes of different sizes, some notes higher, some lower, etc.). Otherwise I can write a parser that harvests this data from the SVGs and pumps them into GSAP's JavaScript API, but this is a bit of a pain.