Jump to content
Search Community

Make transformOrigin + Scale = Responsive?

TradingBo 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

Great library guys, really enjoying it so far.

 

Was wondering if you could point me in the right direction re: responsiveness on the Scale & transformOrigin properties in the CSS plugin? 

 

Question: Is it possible to easily relate these to the width/height of the container element with GSAP functionality? 

 

I had a look though the Docs but couldn't find anything on this specifically.

 

The container & contents scale well on different devices but when it comes to actually resizing the window the TransformOrigin is totally rigid.

 

The idea is to ultimately have a pair of <svg> hands holding the globe on either side so ideally would need to be able to scale up/down with screenWidth along with the SVG.

 

Thanks,

 

 

See the Pen KxMGjY by EasterIslandMedia (@EasterIslandMedia) on CodePen

 

See the Pen KxMGjY by EasterIslandMedia (@EasterIslandMedia) on CodePen

Link to comment
Share on other sites

Wow thanks OSU that's amazing. 

 

So can see from your answer this was more of a JS/SVG question rather than anything specific to GSAP.  Appreciate the lesson! 

 

So looks like the key is anchoring the sizing of the cubes container to an SVG via a matrix using the .getScreenCTM() function.

 

What I don't quite understand is that the cubes still have the same fixed width of 25(pixels as default)?

Sorry if this is obvious but where exactly in the snippet is the scale of the .cube class being told to resize relative to it's .cube-container element...

 

Is it quite simply because they are child elements and their container's scale is being set to:

 

 scaleX: matrix.a,
 scaleY: matrix.d,

 

Thanks again! 

 

 

 

 

Link to comment
Share on other sites

Hi @TradingBo

 

What I did is not obvious, and there's probably not a lot of people that will understand why it works.

 

To make the HTML cubes behave like the SVG, I wrapped the cubes in a container, and instead of changing the size of each cube, I just scale the container to match the scale of the SVG. That's the hard part, because getting the scale of the SVG isn't obvious.

 

The .getScreenCTM() returns the transformation matrix of the SVG. When there is no rotation, this is what the values of the matrix represent.

 

var matrix = svg.getScreenCTM();

matrix.a = scaleX;
matrix.b = 0;
matrix.c = 0;
matrix.d = scaleY;
matrix.e = x;
matrix.f = y;

 

 

Here's a demo where I demonstrate some of that. The gray box represents the view box of the SVG. When you resize your screen, you'll notice that matrix.a and matrix.d represent the scale of the view box, and depending on the shape of the screen, matrix.e or matrix.f will change.

 

See the Pen RLPOyj by osublake (@osublake) on CodePen

 

 

So knowing that matrix.a is scaleX and matrix.d is scaleY, I just plug those values into scale for the container. I also apply the scale to offset the x and y values of the container. I'm dividing by 2 because the transform origin for those values is 50% 50%.

 

TweenLite.set(container, {
  xPercent: -50,
  yPercent: -50,
  scaleX: matrix.a,
  scaleY: matrix.d,
  x: -cubeSize / 2 * matrix.a,
  y: -cubeSize / 2 * matrix.d,
})

 

 

 

 

 

  • Like 6
Link to comment
Share on other sites

  • 1 month later...

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...