Jump to content
Search Community

Staggering SVG symbols?

Igorivart test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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

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.
×
×
  • Create New...