Jump to content
Search Community

How do tween vars relate to SVG transformations?

hrvoje test
Moderator Tag

Go to solution Solved by Carl,

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

New to GSAP, sorry if I'm missing something obvious, but I'm having a hard time understanding tween transformations.

 

Please look at the codepen. I have three squares of dimension 10 at origin (10,10). Blue has been translated x+10 then scaled to half. Red has been scaled to half, then translated x+10.

 

The black square I transformed using TweenMax.to() with x=10, scale=0.5 and it animates to a completely different location than the blue or red squares. I would expect it to either scale then transform, or vice versa.

 

How would you explain GSAP g tweening in relation to basic SVG transformations?

 

See the Pen GWboXJ?editors=1010 by hrvojesimic (@hrvojesimic) on CodePen

Link to comment
Share on other sites

  • Solution

I can understand the confusion. Two things are in play here with GSAP

 

1: When doing transforms on SVG elements GSAP will default to a transformOrigin of 0 0 based on the elements own coordinates. We want to to normalize SVG behavior with the more predictable behavior of normal DOM elements. SVG elements normally transform around an origin based on the parent SVG's coordinates. Notice how the blue and red boxes in your demo move up from their normal position. We would argue that is kind of strange and unexpected. Fortunately with GSAP you can choose to use svgOrigin or transformOrigin as illustrated here: http://codepen.io/GreenSock/pen/waKrNj

 

2: GSAP always performs transform calculations in the same order (to be predictable). So the black box is moving over 10 to the right (x) and then being scaled to its top left corner.

 

See this demo that hopefully illustrates the points above clearer. Notice how the blue box moves ABOVE the red box when you scale it down.

https://codepen.io/GreenSock/pen/QpXqEa

 

Definitely read: https://greensock.com/svg-tips to find out more about GSAP's unique strengths when dealing with SVG.

 

If you have more questions, let us know.

  • Like 6
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...