Jump to content
GreenSock

nhunt290

How to get or increment the scale value

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

I'm using GSAP's TweenMax to scale a div when a user clicks on a button.

 

However, what I want to do is be able to get the current scale value and/or know how to increment the scale value by say 0.5.

 

This is how I'm setting the scale when the button is click:

TweenMax.to(mapContainer, 0.4, { scale: 1.3});

 

So scaled to 1.3 over 0.4 seconds. So what I'm wanting to do is when a user clicks on that button again, it will scale it by an extra 0.5 each time.

 

I've also asked this on SO as well if you'd like to asnwer on there as well for the benefit of anyone looking aorund: http://stackoverflow.com/questions/24181307/how-to-get-scale-value-using-greensock-animation-platform-gsap

 

Thanks!

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,

 

Please take a look at the Jump Start slide below that explains using relative values in tweens:

http://www.greensock.com/jump-start-js/#relative-tweens

 

I modified that demo to use scale for you here:

http://codepen.io/GreenSock/pen/ukzvd?editors=001

 

As for the scale, there really isn't a scale property exactly. The scaleX and scaleY get parsed into a 2D matrix. When you transform an element with GSAP we attach a ._gsTransform object to the DOM element that holds some easy to read properties that will help you. In the demo I am displaying the scaleX of the element (which is the same as the scaleY)

 

Open your browsers JS console when the demo runs and you will see something like:

Screen Shot 2014-06-12 at 1.10.36 PM.png

  • Like 3
Link to comment
Share on other sites

Hi Carl,

 

Thanks for this! Works great, the ._gsTransform object is very helpful to know about as well, so I will keep that in mind in future!

 

In short, I have an image that is set to bigger than the screen, so when first loading the page I can see like 1/3 of it and the rest you scroll around to get to, it's like a map. So what I was wanting to use the scale for was to zoom in, which it does fine. However, my query is, when I scale the image up, I can no longer see the rest of the image, I can only scroll around the area that has been scaled. Do you know of a way I can use scale and make it not crop the window to the scaled area of the image? Or if there's a better way than using scale if not?

 

Help is much appreciated :)

Link to comment
Share on other sites

Still wondering if anyone can help with the above?

 

But I've also just come across another problem, which is that when I scale the div, another div that I have a position:fixed on outside the div that is being scale, disappears in Chrome, but doesn't in Firefox. Has anyone come across this before and have a solution?

Link to comment
Share on other sites

As for your scaling problem, CSS transforms (scale, x, y, rotation) do not affect document flow. The elements still take up the same amount of space on the page as they did prior to the transform (the width and height properties do not change).

 

This article addresses the issue and offers the solution of placing your scaled item in a wrapper and adjusting the width and height of the wrapper based on the scale value:

 

http://blog.sathomas.me/post/zooming-html-content-with-css-scale-transform

 

---

 

As for the weird disappearing div with position:fixed, not really sure. It would help if you shared a demo that we can look at as described here: 

http://forums.greensock.com/topic/9002-read-this-first-how-to-create-a-codepen-demo/

  • Like 2
Link to comment
Share on other sites

I'll take a look through your link now and see if I can sort the scaling problem.

 

I've also created a pen regarding the position:fixed items disappearing.

 

See the Pen xLGFl by anon (@anon) on CodePen

 

When pasting all my code into the pen, I didn't have a full URL link in the background image on the #map-container css id, so when I clicked zoom in anyway without the background image being there, it seemed to work in chrome. I then added a background image with a full URL and it disappeared when zooming. So I remove the background-image property all together and it worked again. So that's what I've been able to find out if that helps you with any ideas.

Link to comment
Share on other sites

Hello nhunt290..

 

The reason the controls disappear is because you have no z-index set on your 2 control elements:

 

Working forked example for Chrome:

See the Pen nbdJD by jonathan (@jonathan) on CodePen

 

Add z-index  to your CSS rules #zoom-controls and #nav-controls :

#zoom-controls {
     z-index: 2000;
}

#nav-controls {
     z-index: 2000;
}

it is good practice anytime you position fixed, or absolute that you set it's parent or another element to position relative so control what the absolute or fixed positioned element is relative to. So to play it safe i would also add position:relative to your <body> tag.

 

Hope this helps

Link to comment
Share on other sites

Hi Jonathan,

 

That seemed to be the problem, thank you!

 

I assumed they were just being moved off-screen, not under the image so I didn't think about the z-index. Explains why they were still visible without setting the background image as well I guess!

Link to comment
Share on other sites

  • 3 weeks later...

This is great solution for making simple zoom buttons, but does anyone know how to limit the max/min scale amount?

 

For example, I'd like to prevent an image being scaled more than 4 and less than 1.

 

Thanks!

Link to comment
Share on other sites

I created an if statement to make sure it didn't scale beyond '6'

 

So in my zoomIn function, I did:

 

var mapContainer = document.getElementById("map-container");
if(mapContainer._gsTransform === undefined || mapContainer._gsTransform.scaleX < 6){

    //do your scale stuff

    TweenMax.to(mapContainer, 0.4, { scale: "+=1", onComplete:setAnimatingFalse});

}

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