Jump to content
Search Community

Spin loop animation with Attributes

oeffnerd 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

I am currently working on a "kaleidoscope" type webpage that I can save off into a SVG to load inside of illustrator/inkscape.  The issue I ran into is I am animation the objects currently with a css animation.

 

TweenMax.to(dom, 10, { rotation: "+=360", repeat:-1, ease: Linear.easeNone, transformOrigin:"50% 50%" });

 

However this rotation does not transfer properly to Inkscape so I am trying to accomplish the same thing except using an attr:{} object. So far though I have had no luck and was hoping some of the more familiar Greensock users had some insight.

 

The only other req other then spinning is the ability to rotate around the center of the object, hence the transformOrigin:"50% 50%".

 

 
TweenMax.to(dom, 10, { attr:{transform:"rotate(180)"}, repeat:-1, ease: Linear.easeNone, transformOrigin:"50% 50%" });
 
is what I currently have but only sets the rotate to 180, it may be looping but I cant tell because its always at a rotation of 180. Also I am not sure if the transform origin needs to be within the attr tag now or not.
 
Thanks in advance for the help!
Link to comment
Share on other sites

Wow so easy :P Thanks for the pointer. I am also running into a different issue however with animations + firefox. 

 

For some reason I always get "NS_ERROR_FAILURE" errors when trying to tween. Other then the root SVG I am instantiating everything on the fly through document.createElement and appending through appendChild. I am not using any display:none tags which I have read online can cause some issues. When I tried to replicate through CodePen I dont get the issue. I also dont get the issue if I add the animation to a group in firefox but when I add it to the path element I get the issue again. Except with the group animating the nested path does not change.

 

 

I will do my best to add some sort of codepen example if I can replicate the issue

Link to comment
Share on other sites

Hello oeffnerd,

 

The NS_ERROR_FAILURE error is due to trying to animate SVG child elements inside <defs> or <symbol> tags. Since CSS is not directly rendered on elements inside <defs> or <symbol> tags.

 

Also be careful not use display: none on any of your SVG tags or SVG child elements, since using display: none will remove those SVG child elements from the render tree and then you will get that NS_ERROR_FAILURE. The NS stand for NameSpace, which is used for the SVG namespace. If you need to hide SVG or SVG child elements then you must either use the CSS style property visibility:hidden or the visibility attribute.

 

Resources:

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

SVG Visibility: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/visibility

 

:)

  • Like 1
Link to comment
Share on other sites

Firefox follows the spec for SVG, whereas Chrome will allow such things, but later will remove that functionality to honor the SVG spec. So in this case you must animate the attributes instead. You have to use the GSAP AttrPlugin. So anytime you animate SVG child elements that are inside a <defs> or <symbol> tag. You must animate the attributes of those elements. Since CSS is not directly rendered on any child elements inside <defs> and <symbol> tag. Graphical elements inside <defs> tags are not rendered directly and are just used as a reference.

 

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

 

Here are some examples of using the GSAP AttrPlugin to animate SVG child tags nested in a <defs> tag:

You should setup a codepen example so we can see your SVG markup along with your GSAP code to better help you.

 

 

:)

  • Like 5
Link to comment
Share on other sites

Jonathan you are the man, thanks for all the references. I  just got back from lunch so I haven't looked into them yet but I will be now. From skimming your post though I have a couple thoughts. Is that not what useSVGTransformAttr is using ? My original post was asking about doing animations through the attribute tag so I thought that is what the bool did. 

 

Again thank you for the references and help!!

 

ill keep trying to reproduce it codepen

Link to comment
Share on other sites

Glad to help :)

 

The useSVGTransformAttr property is part of the GSAP CSSPlugin.

 

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

 

That is there due to some browsers being babies and needing transforms applied to the SVG transform attribute to animate properly. But since SVG <defs> and <symbol> tags don't directly render their child elements with CSS. You must use the GSAP AttrPlugin.

 

But i have not tested with using the CSSPlugin with useSVGTransform set to true, if that would animate the object inside a <defs> or <symbol> tag. Since technically it would still be animating the element with the transform attribute of the tag. It might work but not sure :blink:

 

Wait i just tried and it wont work with the CSSPlugin useSVGTransformAttr at true :(

 

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

 

But it doesn't matter because the GSAP AttrPlugin already does animate within <defs> trouble free :)

Link to comment
Share on other sites

Alright so I put together a codepen. Couple things to note this is a very bare bones version of what I am actually trying to do but since I doubt you want to look at a couple hundred lines of loading svg's, extracting the path information, modifying the string based on offset/scale, then combining upwards of 10 paths into path that I use for the clip path I only included the basics. I also had to remove the , transformOrigin:"50% 50%" because you wont see a circle animate if its spinning around its center.

 

The reason I am doing a lot of this on runtime is because most of this project so far has been proof of concept. So I have implementations for css animations, svg animations, greensock. Masks or clip paths (for firefox as far as I can tell I need to use masks but in chrome clip-paths have performed a lot better), injecting svgs to inline paths, combining those paths or not, etc.

 

All this does is setup the masks and branches (think a pie with 6 slices, and a circle cut out of the center for a logo), add 6 circles to the mask, and rotate said mask using greensock.

 

See the Pen YydpJp by anon (@anon) on CodePen

 

The demo animates on chrome but not on firefox. I also dont get the NS error on Firefox but I think they may just hide that from you in codepen (not really sure)

Link to comment
Share on other sites

If you look at the <mask> tags children within the <defs> tag you will notice GSAP is indeed chaning the values of the transform function within the style tag. Chrome will animate CSS inside <defs> tags even though the SVG spec forbids it. In Firefox you can see GSAP also changing values of the transform function within the style tag, But Firefox will not render CSS of child elements inside a <defs> tag. 

 

You might have to arrange your SVG elements differently or use multiple SVG tags to accomplish the same thing, since GSAP has no control of what part of the spec the various browsers will support or not support. I can guarantee that even though it is animating the CSS properties in Chrome. Several months from now it will probably not work due to Chrome implementing their rendering engine to honor the SVG spec regarding CSS rendering of graphical elements within <defs> and <symbol> tags.

 

You could try this same thing with CSS clip-path property and have GSAP animate that instead. You might have a better chance since CSS clip-path will work with simple shapes like a circle. But has poor support for animating polygon shapes at this time.

 

The below is an example of using GSAP to animate an <img> tag with a SVG clipPath mask. It uses a CSS clip-path property as reference to animate an image tag with a SVG tag, to simulate a mask effect.

 

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

 

You can use SVG tags as references for a <img> tag and or other html tags with a CSS background-image. And then you can animate as usual with CSS, uisng the CSSPlugin, like in my example.

 

The NS error ususally will show up when you try to access a SVG DOM node that has display: none or that does not exist.. since both instances would not be in the rendering tree.

 

:)

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