Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Igorivart

Staggering SVG symbols?

Recommended Posts

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

Link to comment
Share on other sites

@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!!!

  • Like 3
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×