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
}
);