Jump to content
GreenSock

jackrugile

Force Recalculate Transform Origin of SVG Group

Go to solution Solved by PointC,

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

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

See the Pen a51dbbe344854c879eecfc559dcb4d3d by jackrugile (@jackrugile) on CodePen

Link to comment
Share on other sites

  • Solution

HI jackrugile :)

 

Welcome to the GreenSock forum.

 

I think you're going to run into trouble when you're trying to set one of those SVGs to display: none because it will be taken out of the render tree. Jonathan has a nice write-up about that here:

 

https://greensock.com/forums/topic/15588-dragging-masked-svg-path/?p=68061

 

Is there a reason you're swapping SVGs for desktop and mobile since it scales up and down so well? Just curious.

 

Happy tweening.

:)

  • Like 3
Link to comment
Share on other sites

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!

  • Like 2
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.
×