Jump to content


SVG Animation on click, not as expected

Go to solution Solved by Diaco,

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

This is my first attempt at SVG animation with GSAP...I'm not sure what I'm doing wrong!?


I'm trying to achieve this simple animation on click (red/second box from left): http://callmenick.com/_development/css-hamburger-menu-icons/


I'm experiencing all kinds of weirdness...any help is greatly appreciated :)

See the Pen meybNe by MandyMadeThis (@MandyMadeThis) on CodePen

Link to comment
Share on other sites

Hmmm, Ok so you cannot use SVG defs files and Greensock together? Or is there a way to do that?


But even if I just use regular inline SVGs, I'm confused about what I'm doing wrong with the roation here? 

See the Pen MaYYwM by MandyMadeThis (@MandyMadeThis) on CodePen


Based on this, I'd think that my code is correct...but clearly it's not!

Link to comment
Share on other sites

Diaco is right! .. You have a <symbol> tag as a child of your <def> tag..


The web spec shows that the <symbol> tag is a container element, structural element, that is not rendered.


Both <def> and <symbol> tag are not directly rendered.


<def> : https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs

<symbol> : https://developer.mozilla.org/en-US/docs/Web/SVG/Element/symbol

W3C SVG symbol tag: http://www.w3.org/TR/SVG/struct.html#SymbolElement


Happy Tweening :)

  • Like 2
Link to comment
Share on other sites

To add to the info from Jonathan and the pen from Diaco - 


Your revised pen (after you moved the SVG inline) was working correctly, but the y movement (you had 8px and 2.5px was all that was necessary) was just sending the top and bottom menu pieces off of the button so the rotation was happening outside the viewing area. :)

  • Like 3
Link to comment
Share on other sites

@Diaco and @PointC, thank you so much!


@jonathan - OK, I see - if I want to animate SVGs I need to inline them and not use the  `<use>` tag. 

Link to comment
Share on other sites

If your animating an svg graphical or text elements directly with the CSSPlugin like rotation, opacity, etc than just animate those svg parts like Diaco had in his example. Excluding the symbol tag, def, and use tag IMHO.


GSAP can also animate attributes on your svg tags. For example this example animates the SVG turbulence filter attributes animated with the AttrPlugin:


See the Pen NqZPwd by jonathan (@jonathan) on CodePen


So as you can see GSAP is very versatile.


The <use> tag is a different beast.. i would have to create an example to test that when i have more time. But in your first example above you had an inline style for display:none; on your SVG tag. A value of display:none; indicates that the given element and its children will not be rendered according to the SVG Display spec:


SVG Display:https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/display

W3C SVG Display Spec: http://www.w3.org/TR/SVG11/painting.html#DisplayProperty


GSAP AttrPlugin: http://greensock.com/docs/#/HTML5/GSAP/Plugins/AttrPlugin/



  • 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.