jackrugile

Hey PointC, Thanks for that link, that definitely seems to be the issue. Looks like I'll have to use absolute positioning to move it off the screen and out of the flow of the document. The desktop SVG had landscape dimensions and the mobile SVG has portrait dimensions. Sorry, I didn't really reflect that in my reduced demo. Thanks for your help!

Hey folks, I am using GSAP to get around the Firefox transform origin issues with SVGs and SVG child elements. I am applying animations to groups within an SVG. I have two SVGs, one that is for desktop sizes, and one for mobile. Each one calculates the 50% 50% transform origin on page load. However, on resize, when swapping to the alternate SVG for the different screen size, all the calculations are shifted and messed up for the one that was previously hidden. CodePen Demo Resize the window to see the issue. The SVG groups should be animating the same way. Is there a way to force GSAP to recalculate the transform origin on resize? This is the code I'm using: TweenMax.fromTo( elem, 0.75, { rotation: -10, transformOrigin: '50% 50%' }, { transformOrigin: '50% 50%', rotation: 20, ease: Sine.easeInOut, repeat: -1, yoyo: true } );