Jump to content
Search Community

SVG transform origin

gntjnn test
Moderator Tag

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

Hi,

 

i'm trying to recreate the following hover effect with GSAP:

See the Pen PZJGLx by noeldelgado (@noeldelgado) on CodePen

 

Right now i'm trying to figure out how i set the transform origin correctly. The element that I want to tween is initially translated so the animation starts at the wrong position. Hope someone can explain me how to fix this. Here is my Pen: 

See the Pen RxOORG by gntjnn (@gntjnn) on CodePen

 
Thanks

 

Link to comment
Share on other sites

  • 7 months later...

Have you resolved this? The solution is quite simple. You are already tracking mouse coordinates so just setting transformOrigin attribute in the mouseOut handler to be the center of the circle probably does what you wish.

 

I do get strange resizing circle effect that other might fix though (Firefox 61.0.2 on Mac OS).

 

See the Pen gdgRLR by mattsrinc (@mattsrinc) on CodePen

 

Link to comment
Share on other sites

Not sure why it went unanswered. Problem is OP was changing cx, cy attributes of the circle but once at start when you set scale to zero, GSAP will set transform origin based on that initial position. That's why all scale downs were ending up in top left corner.

 

The fix is pretty simple, use GSAP and set the circle's x and y translate. Another thing to note, unlike HTML elements the default transformOrigin for SVG elements is top left corner.

 

See the Pen MqJxOZ?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

@GreenSock I guess it is conflict between data-svg-origin and css transform-origin, I can see matrix updating when scale animates, but _gsTransform doesn't change so it is changing in CSS I guess. Can you explain? Here is reduced test case.

 

See the Pen oPBOvZ?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

Link to comment
Share on other sites

2 hours ago, Sahil said:

I guess it is conflict between data-svg-origin and css transform-origin, I can see matrix updating when scale animates, but _gsTransform doesn't change so it is changing in CSS I guess. Can you explain? Here is reduced test case.

 

I don't see anything odd here, but maybe I'm missing something obvious. What were you expecting to see change in _gsTransform that isn't changing? And what looked like a conflict between data-svg-origin vs css transform-origin? 

 

Remember that the cx/cy values would visually be affected by transforms. So, for example, if you start with cx/cy at 50,50 and then apply a scale of 0.5, those would appear to be at 25,25. Think of it like looking through a filter. So @Sahil is absolutely right about the solution being to alter the x/y transforms rather than the cx/cy attributes. 

 

Like this (for the reduced test case): 

See the Pen BOpgQd?editors=0010 by GreenSock (@GreenSock) on CodePen

 

  • Like 2
Link to comment
Share on other sites

The problem is that changing cx/cy values results in a different getBBox value.

 

GSAP normalizes a lot of behavior with transforms in SVG, but they work EXACTLY like they do in canvas. If you don't translate to the transform origin, it's not gong to scale correctly.

 

See the Pen 095c5e272fb9c6d46a7f105811bc0491 by osublake (@osublake) on CodePen

 

 

  • Like 4
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.
×
×
  • Create New...