sebzzzn

Yes, that is super helpful, thanks so much Jack!

Thanks for the answer Jack! Makes a lot of sense. I wonder how these paths got in there in the first place and if it was introduced from the designer who worked on the file or illustrator itself doing something weird to it. I'm wondering also if there's an easy way to spot that quickly in the future if it happens. I guess look for paths that have move commands and nothing else?

Ahh, you're right-on. That fixes it. Thanks so much! If you can let me know what these paths were and how I can look for them if it happens again? Is it illustrator that introduces problematic paths? Thanks again!

Thanks @Diaco! Here's the CodePen: http://codepen.io/sebzzz/pen/pjJaBR

Hey there! I'm having an issue rotating an SVG element from its center. I know that it's one of GSAP's strengths to take care of the complexity behind transform-origin for SVGs and I never had this issue before. Basically I have an infographic SVG that has 4 main circles with illustrations and I want to rotate them a bit on hover with this: jQuery("g#weight-lifting-p, g#sprinting-p, g#cardio-p, g#walking-p").hover( function() { TweenMax.to(jQuery(this), 0.2, {rotation:15, transformOrigin:"50% 50%", ease:Back.easeOut}); }, function() { TweenMax.to(jQuery(this), 0.2, {rotation: 0, transformOrigin:"50% 50%", ease:Back.easeOut}); } ); The strangest thing is that it works for g#weight-lifting-p, g#sprinting-p, but the other 2 won't rotate from their center in Chrome and Safari. All 4 work perfectly in Firefox and I can't tell for IE because I don't have any way to test it there. They rotate with a transform-origin that's wrong. It almost feel like something is wrong with my SVG that confuses GSAP or Chrome/Safari? I exported the SVG from Illustrator. I had a designer create it and it works with a legacy version of Illustrator, but I put the finishing touches and did the SVG export from the latest Illustrator CC. I tried exporting with different options, still no luck. I also looked into the SVG code around one shape that works fine and one that has issues, but everything seems consistent. My SVG starts out like this <?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 612 1010.4" style="enable-background:new 0 0 612 1010.4;" xml:space="preserve"> And I use jQuery to load the SVG like this: jQuery( document ).ready(function() { jQuery("#staging").load('http://paleoleap.com/infographics/exercise-infographic2.svg',function(response){ I'm not sure if I'm doing something wrong, but like I said it's the first time that this happens, because normally doing any transforms from a transform-origin of 50% 50% works like a charm with GSAP. If anybody has any idea why this is happening I would greatly appreciate. Seb