[Staggering SVG symbols?]

@Carl

 

Wow... Thanks allot!!! I cant believe you just made a custom tutorial for me. I've been banging my head on this for days.... Thanks!!!

[Staggering SVG symbols?]

Hello,

I want to start by saying i'm a noob to programming in general, as to javascript and green sock. As soon as I learned some html and css I dived into SVGs. I have an illustration background so this seamed appealing and most fun to me... I quickly realised that greensock is the way to go...

So, I want to animate my logo appearing in a sci-fi kind of way, where there is a bunch of stuff happening. This isn't the logo animation but a test. I want to learn what I can and can't do...

 

I am trying to use a single svg and make it appear a bunch of times using the staggerfrom. The plan was to create a symbol and then call on it as many times as I need. Then make them stagger on to the screen.

The problem is I dont know how to call on those symbols with Tween... I tried giving my <use>es Ids, classes and even putting every <use> element inside of a div.

The first two just don't make the animation work. When I put it inside of a div then the animation works but the called <use> symbols are just not visible.

Am I doing something wrong or is it not possible? Is there a workaround? I know there must be but my general knowledge is limited at best.

romb.svg

See the Pen oqEdrB by Igorivart (@Igorivart) on CodePen