Jump to content
GreenSock

isseto

Solved - Animation on SVG <use> tags?

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

Hi everyone!

I am working on a project that requires animating a lot of elements on the page. I am trying to use SVG instead of Canvas, and thought of using <g> and <use> tags to keep the SVG code lightweight.

 

Basically, I am trying to copy paste the svg element and its animation, but placing it in a different position.

However, I can't seem to animate the <use> tag (see attached Codepen).

I tried adding an id="redCircle" to it too, but javascript doesn't seem to pick it up and won't animate it. 

 

Any help?

Link to comment
Share on other sites

Nevermind - realised I was using ids and not classes.

Link to comment
Share on other sites

Hey isseto,

 

Welcome to the forums!

 

It's late here and I am about to go to bed so, forgive me for the little amount of information.

 

Basically, SVG's x and y are not the same thing as GSAP's x and y. The reason your second red circle was not working was because you were tweening it to 0 in both x and y.

 

If you want to tween the x and y values of the SVG, you will need to use the attrPlugin. See bellow.

 

See the Pen PGjNzz?editors=1010 by dipscom (@dipscom) on CodePen

 

Also, if you are going to use the use tag, it's always best to wrap what you want your graphic to be into a symbol tag and put it in the defs tag, like so:

<symbol id="circle">
 <circle class="st0" cx="200" cy="100" r="54"/>
</symbol>

Here's MDN's entry on the matter:

 

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use

  • Like 1
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.
×