Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
gntjnn

SVG transform origin

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

Ohk, it's not really GSAP thing just how scale behaves when you set cx, cy attributes. I was noticing translate x and y changing in matrix but it wasn't reflecting in _gsTransform. Now it's clarified.

 

See the Pen pOebKQ?editors=0010 by Sahil89 (@Sahil89) 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

Here's a neat article Jack wrote about transform origin in SVG. In one of the demos it shows how the transform origin is actually relative to the top left corner of the SVG, but you don't have to deal with that if you're using GSAP.

https://css-tricks.com/svg-animation-on-css-transforms/

 

 

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