oeffnerd

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. http://codepen.io/anon/pen/YydpJp 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)

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

I do have it nested under a def.. its a clip path that I am using on 6 "branches" and that clip path is spinning. So on firefox I am unable to animate anything under a def?

Wow so easy 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

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!